CSS: Round Corners Examples: border-radius

Xah Lee, 2012-04-20

This page shows a example of using CSS3 to make round corners. You can do that with the “border-radius” attribute.

Here's a “div” element with round coners:

Here's the CSS code:

div {
width:100px; height:100px;
border:solid thin black;
border-radius:10px;
}

Examples

Each of the following have width:100px; height:100px.

Once the “border-radius” is more than half of the width or height (whichever is smaller), the whole thing becomes a circle.

Rectangle Examples

<div style="width:200px; height:100px; border:solid thin black;border-radius:50px;">border-radius: 50px</div>

Browser Support

“border-radius” is supported in all browsers, as of 2012-04-20.

Reference

http://www.w3.org/TR/css3-background/