border-radius

border-radius builds upon the basic border property to turn the corners of any element into a quarter-ellipse. The property can take any CSS unit of measurement as a value.

Note that the latest versions of all browsers, including IE, Chrome and Opera, follow the border-radius property; vendor prefixes are only required to cover older browsers.

Given a <div> with an id value of #bestanime that contains a heading and an ordered list:

<div id="bestanime">
	<h3>Top Three Anime DVDs</h3>
	<ol>
		<li>Ghost In The Shell
		<li>Spirited Away
		<li>Akira
	</ol>
</div>

You could apply border-radius as follows to turn the corners of the div:

div#bestanime {
	border: 5px double #000;
	border-radius: 20px;
}

border-radius can also be specified for individual corners, if you wanted to turn just one:

div#bestanime {
	border: 5px double #000;
	border-radius-topright: 30px;
}

Hints, Tips & Further Resources

It is also possible to give border-radius different height and width values, so that rather than perfect semi-circles, the corners become ellipses, as I used when making Wall-E’s EVE in CSS3:

div#bestanime {
	border: 5px double #000;
	border-top-left-radius: 75px 60px;
}

Note that box-shadow maps to border-radius. Also note that two separated values for border-radius, such as 60px 3px, does not do what you might expect: the first value affects the top left and bottom right corner of the element, and the second value the top right and bottom left.

You may find that large border-radius sizes with thick borders and high-contrast colours displayed in older browsers do look slightly “chunky” due to poor anti-aliasing when rendering the ellipses; on the whole, this is improved in newer browser versions.

Photograph by Jenny Downing, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.