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 statement; 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:

1. <div id=”bestanime”>
2. <h3>Top Three Anime DVDs</h3>
3. <ol>
4. <li>Ghost In The Shell</li>
5. <li>Spirited Away</li>
6. <li>Akira</li>
7. </ol>
8. </div>

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

1. div#bestanime { border: 5px double #000;
2. -moz-border-radius: 20px;
3. -webkit-border-radius: 20px;
4. border-radius: 20px; }

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

1. div#bestanime { border: 5px double #000;
2. -moz-border-radius-topright: 30px;
3. -webkit-border-top-right-radius: 30px
4. border-radius-topright: 30px; }

(Note that the property syntax changes slightly between older browsers when changing corners, not just the vendor prefix).