Rounded Corners With CSS3

Posted on 20. Oct, 2009 by admin in How To's

Rounded corners have long the bane of any web designers existence. CSS3 to the rescue. Follow this tutorial to learn how to make rounded corners using just CSS coding (that’s right, no images.) Of course, this will not work in Internet Explorer, but Firefox and Safari 3 users will see nicely rounded corners if you use the following CSS techniques.

Firefox

This code:

<div style=”-moz-border-radius: 5px;” >

Will allow your div to have rounded corners.

The following code will make an entire div or class have rounded corners with 5px indent on either corner. Set the radius in pixels to change the shape of the corners. You can even adjust each corner individually to have a different radius to provide a different look.

  • -moz-border-radius-topleft: 5px;
  • -moz-border-radius-topright: 5px;
  • -moz-border-radius-bottomleft: 5px;
  • -moz-border-radius-bottomright: 5px;

Safari

<div style=”-webkit-border-top-left-radius: 5px;” >

  • -webkit-border-top-left-radius: 5px;
  • -webkit-border-top-right-radius: 5px;
  • -webkit-border-bottom-left-radius: 5px;
  • -webkit-border-bottom-right-radius: 5px;

Hopefully one day Internet Explorer will join the rest of the world and we will no longer have to mess with multiple images, transparent png’s, javascript hacks, or whatever other pains you web designers go through while trying to create rounded corners.

———-

This post was written by Simon Vreeswijk of Stikky Media Internet Marketing.

Leave a reply