CSS3 has bring a lot of new features and possibilities into web design. One of such features is the rounded corner support to the box. Earlier before, designers use images and nifty libraries to make the corners of divs round in appearance. But now, with CSS3, you need no more images or JS library tricks, because you have border-radius property to that for you.

CSS3 border-radius property enables you to make the corner of your markup elements round. Below is the format to define a radius for the border of your box in CSS3:

.rounded-corners {
border-radius: 5px;
-moz-border-radius: 5px; /* Firefox 3.6+ */
-webkkit-border-radius: 5px; /* Safari 4+, Chrome 1+ */
-ms-border-radius: 5px; /* Microsoft IE10 */
}

Almost every modern browser supports this property so you don’t need to care about cross-browser support. Supply the border-radius values in TRBL flow, i.e. border-radius: top right bottom left;

CSS3 border-radius in action

The above given code will render the following output when applied to a markup element (I’ve done some additional styling to highlight the element, but the border radius is the thing I want to highlight here):

Alternate Rounded corners with border-radius

Below is the CSS to get alternate rounded corners on your box:

.alternate-rounded-corners {
border-radius: 8px 0 8px 0;
-moz-border-radius: 8px 0 8px 0; /* Firefox 3.6+ */
-webkkit-border-radius: 8px 0 8px 0; /* Safari 4+, Chrome 1+ */
-ms-border-radius: 8px 0 8px 0; /* Microsoft IE10 */
}

That’s all of CSS3 border-radius property. This way you can experiment and learn more about the usage of this property in your design works. I hope you enjoyed the post.