CSS3 fillet (Border-radius)

Prefix

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

Example 1

<div id= "Round" ></div> #round {    padding:10px; width:300px; height:50px    ; border:5px solid #dedede;    -moz-border-radius:15px;      /* Gecko browsers */    -webkit-border-radius:15px;   /* Webkit browsers */    border-radius:15px;            /* syntax */}

Effect:

Example 2: No border

<div id= "Round" ></div>  #round {    padding:10px; width:300px; height:50px    ; Background: #FC9;     -moz-border-radius:15px;    -webkit-border-radius:15px;    border-radius:15px;}

Effect:

Writing order

/* Gecko browsers */-moz-border-radius:5px; /* Webkit browsers */-webkit-border-radius:5px; /* The syntax-likely to is standard so use for the future proofing */border-radius:10px;

Other

Supports top, right, bottom, left

border-radius:5px 15px 20px 25px;

Support for split writing

/* Gecko Browsers */-moz-border-radius-topleft:20px;-moz-border-radius-topright:0;-moz-border-radius-bottomleft:0 ;-moz-border-radius-bottomright:20px; /* Webkit Browsers */-webkit-border-top-left-radius:20px;-webkit-border-top-right-radius:0;- webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:20px; /* Syntax */border-top-left-radius:20px;border-top-right-radius:0;border-bottom-right-radius:0; Border-bottom-left-radius:  20px;

Support of

Browser	support of
Firefox (2)	√
Google Chrome (1.0.154+ ...)	√
Google Chrome (2.0.156+ ...)	√
Safari (3.2.1+ windows)	√
Internet Explorer (IE7, IE8)	X
Opera 9.6	X

CSS3 fillet (Border-radius)