Menu
I use
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
for border radius but that code block not working some browser (internet explorer of course). I tried to use .htc but I had no success.
How can I make border-radius that is supported by all browsers?
619
3–4px Radius: This is best and probably the most safe choice. 3–4px is in every point of standard across multi fields, expressing a little bit more friendly and accommodating then 0px.
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.
It is generally safest to use the same unit for different dimensions, and this applies to border-radius , too, when the height and width of the element have been set in rem units. The reason is that this ensures that the shape is preserved if the font size of the root element is changed.
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property. The syntax is:
border-radius: 1-4 length|% / 1-4 length|%;
Example 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Example 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
See more detailed explanation and tips and tricks for border radius here.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
