CSS for Rounded Corners Tips, Tricks and Tutorials 22 AUG 2013

css-ninja-t-shirtThis is more of a note for myself than anything else, but thanks to more modern web browsers, having rounded corners for your block-level elements like DIVs is a simple matter of adding a line or two of CSS code to your stylesheet declaration.

The CSS3 rule in question is ‘border-radius’ and it allows us in pixels to control the curve of the corner. Now just to be on the safe side, it is worth adding vendor specific rules for webkit and gecko engines, but these days 90% of browsers respond quite nicely to a plain old ‘border-radius’ rule.

In practice the required CSS for borders with a radius curvature of 15px would be:

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

Even nicer than that, because not each corner needs to be the same, the rules allow us to specify a radius for each and every corner, as seen here:

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 150px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 150px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 30px;
border-top-left-radius: 20px;
border-top-right-radius: 150px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 30px;

Designer Jacob Bijani came up with this little toy for you to play around with if you’re too lazy to remember the CSS: http://border-radius.com/

Nifty.

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.