Border Radius allows us to implement rounded corners without using images. It works like this:
This will add a little rounded corner to each edge of the element.
If you'd like to specify the corners separately, you can do so using the longhand syntax:
border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;
You can also use the shorthand version:
border-radius: 10px 20px 30px 0;
These values go round clockwise, starting at the top left. There's no requirement to give each corner the same radius.
You can also create elliptical borders by providing two parameters like so:
border-top-left-radius: 20px 40px;
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:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
The first set are the horizontal radii, the second are the vertical radii.
Browser support is pretty good, It works in Webkit, Opera, Mozilla and IE9.
Border Radius Exercise
In these exercises we will experiment with border-radius.
Attempt to create the following simple effects.
Now attempt the following:
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/