How to create rounded corners with CSS3? | Web Design Dubai

The latest CSS "border-radius" property allows you to easily create rounded corners in your web designs, without the need for corner images.

Support only Firefox, Safari/Chrome, Opera and IE9.

Example 1
CSS Code
Copy and paste the below code into your head section.

#example1 {
width:125px;
height:25px;
padding:25px;
color:#FFF;
background:#000;
border-radius: 15px;
-moz-border-radius: 15px;
}



HTML Code

<div id="example1">Rounded corner box</div>

Example 2
CSS Code
Copy and paste the below code into your head section.

#example2 {
width:125px;
height:25px;
padding:25px;
color:#FFF;
background:#000;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
}

HTML Code

<div id="example2">Rounded corner box</div>

Example 3
CSS Code
Copy and paste the below code into your head section.

#example3 {
width:125px;
height:25px;
padding:25px;
color:#FFF;
background:#000;
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
}

HTML Code

<div id="example3">Rounded corner box</div>

Example 4
CSS Code
Copy and paste the below code into your head section.

#example4 {
width:125px;
height:25px;
padding:25px;
color:#FFF;
background:#000;
border-radius: 0 15px;
-moz-border-radius: 0 15px;
}

HTML Code

<div id="example4">Rounded corner box</div>

Example 5
CSS Code
Copy and paste the below code into your head section.

#example5 {
width:125px;
height:25px;
padding:25px;
color:#FFF;
background:#000;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
}

HTML Code

<div id="example5">Rounded corner box</div>