Rounded Corners with CSS

While there are a bunch of posts on the topic, this is something I look up around the internet often enough. I'm not going to go into the whole spiel about details of cross-browser support and what-not... and, in general, results on IE may or may not be desirable *sigh*.

So here's how to make rounded corners with CSS:


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

That makes an evenly rounded border with a 5 pixel radius.

You also have the option of putting in 2 numbers, representing the horizontal and vertical spread of the curve, respectively:

-moz-border-radius: 5px 10px;
-webkit-border-radius: 5px 10px;
border-radius: 5px 10px;

This makes a curve with horizontal component 5p pixels and vertical component 10 pixels.

And, if you want only the top or only the bottom to be rounded, you can use the following...

Top Rounded:

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;


Bottom Rounded:

-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;


I hope this info saves someone some time!

And there's that.