CSS rounded corners is being used for long time, with the include of css3 border radius as native support. Now it is possible to created rounded corner css elements without using images in css3.
In this tutorial we are going to see how to create simple CSS3 rounded corners or how to control css3 border radius. Before going deep into the properties let’s check the compatibility and simple border radius.
Also try css3 border radius generator.
Image may be NSFW.
Clik here to view.
CSS3 border radius Compatible table:
Image may be NSFW.
Clik here to view.
[ Table via caniuse.com ]
simple css3 border radius:
Below is the simple example of using css3 border radius.
.class {
border-radius: 20px;
}
to make compatible with firefox and webkit browsers and IE (ie., ie border radius ) add -webkit prefix.
.borderStyle{
border:dashed 6px #000000;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}
Image may be NSFW.
Clik here to view.
[ simple css3 border radius demo ]
Css3 circle using border radius:
Easily we can make circle in css without image using css3 border radius property.
.borderStyle{
border:dashed 4px #000000;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright:100px;
-moz-border-radius-bottomleft:100px;
-moz-border-radius-bottomright:100px;
-webkit-border-top-left-radius:100px;
-webkit-border-top-right-radius:100px;
-webkit-border-bottom-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
}
Image may be NSFW.
Clik here to view.
[ css3 circle demo ]
css3 border radius IE Compatible:
Below code is included compatibility for IE border radius. IE9 will use the default border-radius.
.borderStyle{
border-bottom-left-radius: 152px 152px;
border-bottom-right-radius: 228px 228px;
border-bottom-style: dashed;
border-bottom-width: 42px;
border-left-style: dashed;
border-left-width: 42px;
border-right-style: dashed;
border-right-width: 42px;
border-top-left-radius: 152px 152px;
border-top-right-radius: 304px 304px;
border-top-style: dashed;
border-top-width: 42px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
}
Conclusion: In this article we have seen how to created rounded corner css element with css3 (border-radius) without using images.
Keywords to here:
- css3 rounded corners
- css border radius
- ie border radius
- webkit border radius
- border radius generator
Related posts: