CSS3 Tutorials: border-radius – A Detailed View

The border-radius property allows easily rounder corners in our HTML pages, without images or the use of multiple div tags.

Box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
div.bdrAll
{
border-radius:10px;
background:#f5f5f5;
width:50%;
padding:20px;
margin:20px;
}

This class creates the rounded corners for four corners. It look like

We can adjust the rounded corners individually.

div.bdrTL
{
border-radius:5px 15px 30px 45px;
background:#f00;
padding:20px;
margin:20px;
min-height:125px;
width:125px;
}
5px
15px
30px
45px

In this example, the values for each corners TopLeft:5px, TopRight:15px, BottomRight:30px, BottomLeft:45px

Here some more examples:

.bdrTL
{
border-radius:10px 0 0 0; 
background:#eee;
min-height:125px;
width:125px;
padding:20px;
}
Top Left
.bdrTL
{
border-radius:0 10px 0 0; 
background:#eee;
min-height:125px;
width:125px;
padding:20px;
}
Top Right
.bdrTL
{
border-radius:0 0 10px 0; 
background:#eee;
min-height:125px;
width:125px;
padding:20px;
}
Bottom Right
.bdrTL
{
border-radius:0 0 0 10px; 
background:#eee;
min-height:125px;
width:125px;
padding:20px;
}
Bottom Left

Additional properties

We can control every corner of radius with two values.

.box01{
border-radius: 10px;
background: red;
padding: 10px;
border-top-left-radius: 125px 50px;
width: 100px;
line-height: 100px;
color:#fff;
text-align:center;
float:left;
margin:0 20px 0 0
}

.box02{
border-radius: 10px;
background: red;
padding: 10px;
border-top-right-radius: 125px 50px;
width: 100px;
line-height: 100px;
color:#fff;
text-align:center;
float:left;
margin:0 20px 0 0
}

.box03{
border-radius: 10px;
background: red;
padding: 10px;
border-bottom-left-radius: 125px 50px;
width: 100px;
line-height: 100px;
color:#fff;
text-align:center;
float:left;
margin:0 20px 0 0
}


Here the example

Box 01
Box 02
Box 03

 

Tags: