Border Radius

This demo illustrates the CSS3 border-radius property in conjunction with border-width and border-style. Click the links below to see different border widths, radii, and styles. Try this demo in different browsers and compare the display of round corners with different border widths and styles. You’ll see that the same markup doesn’t produce the same results.

Reset No Border Animate Border Width Cycle Border Style Animate Border Radius

The markup shown in the example above is the result of calling getAttribute("style") on the sample block after the style changes have been made.

When this demo was first produced in November 2009, a number of markup differences existed between browsers, including the need to use a -moz-, -o-, or -webkit- prefix with some browsers. Over the past 10 months, those differences have more or less disappeared in the current versions of browsers as they’ve supported the W3C standard markup. What remains are differences in display, especially in the dashed and dotted border-style cases.