Rounding Corners with CSS 3

Published on October 13, 2010 | Filed Under CSS

With the prospect of CSS 3 (sometimes referred to as CSS 5, due to its release with HTML5) becoming a standard within web browsers, many web designers have began implementing some of the new features on their websites. One of the most anticipated implementations is the use of Rounded Corners.

You may recall from my post, Creating Rounded Corners, that the current implementation of CSS requires you to create images and use a bit of programming to accomplish a small effect. Thanks to the newest version of CSS, that is no longer the case.

CSS 3 Properties

Rounded corners are currently accomplished in two ways:

  • -moz-border-radius

    • (Note the dash at the beginning) This allows rounded corners in Mozilla-based web browsers
  • border-radius

    • This is becoming the standard implementation. Currently, it works for Chrome, Safari and Internet Explorer 9 (IE9)

Border Example

The best way to explain something is by showing an example! So here’s an example of a basic rounded box:

<html>
  <head>
    <style type="text/css">
      #roundDiv
      {
        background-color: #339FFF;
        -moz-border-radius: 5px; /*FireFox*/
        border-radius: 5px; /*Chrome, IE9, Safari*/
        border: 3px solid #006CFF;
        padding: 10px;
        text-align:center;
        width:200px;
      }
    </style>
  </head>
  <body>
    <div id="roundDiv">
      Testing
    </div>
  </body>
</html>

If you test this code on a CSS3-compatible browser, you should be seeing a blue box with a rounded border:

It should also be pointed out that all properties within CSS will act the same. There is no special property to change the border color, based on the rounded edge. You can also access each corner individually, just like any other border-based property, by using -left, -right, -top and -bottom, respectively

Browser Test

Since it’s not really enough to just say that it should work, here’s a live demo of the code from above. If your browser is compatible, you should pretty much be seeing what’s displayed on the image above:

Testing

So as you can see, CSS 3 has a very simple implementation for creating rounded corners. There are a number more commands that will be available and I highly suggest doing some reading on what’s to come. This is a big step in the right direction for developers and I think I speak for the majority of us when I say that these changes are long overdue, but none the less appreciated.

~Derek Torrence

Tags: , , ,

Leave a Reply

CAPTCHA Image
*