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;





<span class="Rounded">

    This span has rounded corners!


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.