Having fun with CSS3 — Border Radius

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

Simple round corners

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

div {
    border-radius: 50px;
}

image

How­ev­er, giv­en the stage of devel­op­ment CSS3 is at as of now this is only sup­port­ed by Google Chrome… Instead, you are encour­aged to add ven­dor pre­fix­es :

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 giv­en num­ber of pix­els at each of the cor­ners (see image below):

image

Nat­u­ral­ly 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.

image

Specify different radius for each corner

You can spec­i­fy a dif­fer­ent radius for each of the top-left, top-right, bot­tom-right and bot­tom-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­er­ty names are dif­fer­ent!

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:

image

Oval-shaped corners

You don’t have to be con­tent with cir­cu­lar-shaped cor­ners either, to spec­i­fy an oval-shaped cor­ner, just use this syn­tax:

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

image

The only thing we’re doing dif­fer­ent­ly 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:

image

And once more, you can spec­i­fy these for each cor­ner by set­ting sep­a­rate prop­er­ties:

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;
}

image

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

And final­ly, you don’t HAVE to use pix­els as unit either, most oth­er 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 prop­er­ties.

Demo

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