Write rounded corners with CSS3 (super simple)

prefix :

-moz (e.g.-moz-border-radius) for Firefox
-webkit (for example:-webkit-border-radius) for Safari and Chrome.

CSS3 fillet (All)

Using CSS3, we can create rounded corners with a few lines of code.

This is the setting for a 5px normal border and a 15px border radius:

#roundCorderC {
font-family:arial;
border:5px solid #dedede;
-moz-border-radius:15px;
-webkit-border-radius:15px;
padding:15px 25px;
Height:inherit;
width:590px;
}

Browser support:

• √firefox (3.05+ ...)
• √google Chrome (1.0.154+ ...)
• √google Chrome (2.0.156+ ...)
• Xinternet Explorer (IE7, IE8)
• Xopera 9.6
• √safari (3.2.1+ windows)

CSS3 Fillet (individual)

Of course, the four corners of a div need not all rounded corners, and you can implement fillets individually.

#roundCornerI {
font-family:arial;
border:5px solid #dedede;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:15px;
padding:15x 25px;
Height:inherit;
width:590px;
}

Browser support:

• √firefox (3.05+ ...)
• √google Chrome (1.0.154+ ...)
• √google Chrome (2.0.156+ ...)
• Xinternet Explorer (IE7, IE8)
• Xopera 9.6
• √safari (3.2.1+ windows)

Write rounded corners with CSS3 (super simple)