theburningmonk.com

As you may know already, CSS3 has intro­duced a new set of prop­er­ties which allows you to eas­ily add curved cor­ners to a box.

Sim­ple round corners

You can cre­ate a div with round cor­ners with this sim­ple css:

div {
    border-radius: 50px;
}

How­ever, given the stage of devel­op­ment CSS3 is at as of now this is only sup­ported by Google Chrome… Instead, you are encour­aged to add ven­dor prefixes :

div {
    -webkit-border-radius: 50px; /* for Chrome */
    -moz-border-radius: 50px; /* for Firefox */
}

How much of a curve the cor­ners get is worked out by plac­ing an imag­i­nary cir­cle of a radius of the given num­ber of pix­els at each of the cor­ners (see image below):

Nat­u­rally this intro­duces an inter­est­ing edge con­di­tion – what if the radius of the imag­i­nary cir­cles is set to be equal to or greater than half of the width of a square-shaped ele­ment? Do we just get a cir­cle back?

Yes.

Spec­ify dif­fer­ent radius for each corner

You can spec­ify a dif­fer­ent radius for each of the top-left, top-right, bottom-right and bottom-left cor­ners either like this:

div {
    /* for Chrome */
    -webkit-border-top-left-radius: 40px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 80px;
    -webkit-border-bottom-left-radius: 20px;

    /* for Firefox */
    -moz-border-radius-topleft: 40px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 80px;
    -moz-border-radius-bottomleft: 20px;
}

Note: the prop­erty names are different!

Or using the short-hand syn­tax by list­ing 4 con­sec­u­tive val­ues for each of the four cor­ners in the above men­tioned order:

div {
    -webkit-border-radius: 40px 10px 80px 20px;  /* for Chrome */
    -moz-border-radius: 40px 10px 80px 20px;  /* for Firefox */
}

both will pro­duce the same result:

Oval-shaped cor­ners

You don’t have to be con­tent with circular-shaped cor­ners either, to spec­ify an oval-shaped cor­ner, just use this syntax:

div {
    -webkit-border-radius: 80px / 40px;  /* for Chrome */
    -moz-border-radius: 80px / 40px;  /* for Firefox */
}

The only thing we’re doing dif­fer­ently now is that we’re putting an oval as opposed to a per­fect cir­cle into the cor­ners. The oval is defined by a width and height:

And once more, you can spec­ify these for each cor­ner by set­ting sep­a­rate properties:

div {
    /* for Chrome */
    -webkit-border-top-left-radius: 80px 40px;
    -webkit-border-top-right-radius: 10px 50px;
    -webkit-border-bottom-right-radius: 40px 80px;
    -webkit-border-bottom-left-radius: 60px 20px;

    /* for Firefox */
    -moz-border-radius-topleft: 80px 40px;
    -moz-border-radius-topright: 10px 50px;
    -moz-border-radius-bottomright: 40px 80px;
    -moz-border-radius-bottomleft: 60px 20px;
}

though unfor­tu­nately there’s no short-hand syn­tax to save you from all these typ­ing this time around.

And finally, you don’t HAVE to use pix­els as unit either, most other stan­dard CSS units work too. It’s also worth not­ing that using the ven­dor pre­fix (e.g. –webkit, –moz) allows for a more grace­ful degrad­ing behav­ior IF the final spec for CSS3 uses a dif­fer­ent nam­ing scheme for the bor­der radius properties.

Demo

Check out this quick demo page I’ve put together for you to see the effect of chang­ing the bor­der radius, note this only works if your browser sup­ports the new ‘range’ input type defined in HTML5 (Chrome works fine, but Fire­fox doesn’t sup­port it yet).