Easy Rounded Corners with CSS3

One of the common features of web design in the 1990s were boxes with rounded corners floating over beautifully designed backgrounds.  The sites looked nice, but you had to use some trickery to get the look you wanted. Rounded edges on anything required images, usually held in place by table cells.

Well, folks, we are now a decade into the 21st century, and some browsers that shall remain nameless are just now getting caught up on HTML and CSS standards.  With those standards come new goodies that make it easier to display divs rounded edges.

To achieve rounded corners, you can use the CSS3 border-radius property.  A quick and simple example is:
#div-name {
border-radius: 15px;
}

The div with that ID will have rounded corners like this one.

Additionally, Firefox requires a -moz prefix in order for the property to work. Therefore, your final code will look like:

#div-name {
border-radius: 15px;
-moz-border-radius: 15px
}

This should work in Firefox, Safari, Google Chrome, Opera, and the future Internet Explorer, version 9. Unfortunately, if you want current IE users to see your cool effects, you will still have to use an alternative method for them.

For a more comprehensive border-radius explanation, including several examples, visit CSS3.Info.

Tagged with: , , , , , ,
2 comments on “Easy Rounded Corners with CSS3
  1. Markus Hartel says:

    check out http://css3pie.com/ for rounded corners in older IE versions. works like a champ!

  2. I actually wrote a review/how-to of CSS3 Pie that should be published at maketecheasier.com next week. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.