CSS border radius and round corners examples

CSS3 border-radius property can be used to make corners round of a block element. Border radius can have upto 4 values. Here is how a simple div with border-radius look like:

CSS property border-radius

1. border-radius 4 values: First value is for top-left radius, 2nd is for top-right, third is for bottom right and 4th is for bottom left.
2. border-radius 3 values: Similar to 4 values situation except that 2nd value applies to bottom left corner also.
3. border-radius 2 values: First value is for top-left and bottom right corner. 2nd value is for other two corners.
4. border-radius 1 value: It applies to all 4 corners.
5. Alternatively we can also use border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. This may be useful in case we want to override one value defined in some other style sheet.

Example – border-radius with one value

<style type="text/css" media="screen">
.foo {
 width:100px; height:100px;
 background-color: lightgreen;
 border: 5px solid gray;
 border-radius: 20px;
}
</style>
<div class="foo"></div>

Example – border-radius with two values

<style type="text/css" media="screen">
.foo {
 width:100px; height:100px;
 background-color: lightgreen;
 border: 5px solid gray;
 border-radius: 20px 40px;
}
</style>
<div class="foo"></div>

Example – border-radius with 4 values

<style type="text/css" media="screen">
.foo {
 width:100px; height:100px;
 background-color: lightgreen;
 border: 5px solid gray;
 border-radius: 10px 20px 30px 40px;
}
</style>
<div class="foo"></div>

Example – border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

<style type="text/css" media="screen">
.foo {
 width:100px; height:100px;
 background-color: lightgreen;
 border: 5px solid gray;
 border-top-left-radius: 10px;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 30px;
 border-bottom-left-radius: 40px;
}
</style>
<div class="foo"></div>

Related

• CSS border - define border properties of an element
• CSS border-width - set element border width of four sides
• CSS border-color - define color of four borders
• CSS border-style tutorial and examples

Specification and Browser compatibility