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.