Border Radius

Border Radius allows us to implement rounded corners without using images. It works like this:

border-radius: 15px;

This will add a little rounded corner to each edge of the element.

Particular Corners

If you'd like to specify the corners separately, you can do so using the longhand syntax:

You can also use the shorthand version:

These values go round clockwise, starting at the top left. There's no requirement to give each corner the same radius.

Elliptical Borders

You can also create elliptical borders by providing two parameters like so:

The parameters are:

• horizontal radius
• vertical radius

Elliptical Border Shorthand

You can create elliptical borders using the shorthand syntax. Provide two sets of values separated by a / like so:

The first set are the horizontal radii, the second are the vertical radii.

Browser Support

Browser support is pretty good, It works in Webkit, Opera, Mozilla and IE9.

If you need to display rounded corners in IE8 you will need to load a conditional stylesheet with background images. There are a variety of JavaScript hacks but these work by adding multiple varying width divs to the page, and add quite a lot of rendering overhead, so I would suggest keeping it simple and just using rounded corner images.

BonBon Buttons

Combining Border-radius with box shadow lets us make some very clever effects. Check out BonBon Buttons for an example. We hope for the sake of the internet these do not take off, but the effect is wonderful all the same. http://lab.simurai.com/css/buttons/