Rounded Corners With CSS

34 sec read

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:

Terrible Rounded Corners

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

The Right Way

Ladies and gentlemen, I present to you…

</p>
<pre><code><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.

Leave a Reply

Your email address will not be published.