Rounded Corners With CSS

By Josh Wright on June 2010 in tips

 

The Old Way

Apparently I've been doing rounded corners like a three-year-old from 1993. Lots of html, images, javascript, and probably a whole library was involved, reminding you of something like this:

[caption id="" align="alignnone" width="470" caption="Terrible Rounded Corners"]Terrible Rounded Corners[/caption]

This was all graciously brought to my attention by my css guru coworker @okcscott.

The Right Way

Ladies and gentlemen, I present to you...

<style type="text/css">

    .Rounded {

        -moz-border-radius:10px 10px 10px 10px;  // rounds corners for firefox

        border-radius:10px 10px 10px 10px;  //rounds corners for other browsers



        border:solid 1px #000;

        background-color:#acf;

        padding:10px;

    }

</style>



<span class="Rounded">

    This span has rounded corners!

</span>

Looks like this:

This span has rounded corners!

Off course this doesn't work in all browsers... just the good ones, so maybe all those libraries aren't obsolete. But I hope they will be someday.