I'm making a website, and would like to know if the CSS property "borderRadius" is 'acceptable'. Like, should it be expected that everyone has a browser supporting it, or is it still too unsupported that I shouldn't use it?
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.
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 can take either one to four values, or eight values separated by a slash '/', with one to four values on each side of the slash. If there is no slash, then: it can take one, two, three, or four values.
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.
This is a good time to check http://caniuse.com for the specifics on which browsers support it, and which ones do not. Additionally, http://css3please.com will tell you the proper way to implement it for the broadest support.
From the first site, we see that the support isn't all that bad, though we will need to use some prefixes for some browsers. The second site gives us the following implementation:
.box_round {
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+,
iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
Any browser that doesn't understand it will just ignore it, and move on to the next rule. With that, be sure not to use it in any way that your layout depends on it for usability. Use it as a progressive enhancement, and not a necessary feature.
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