1. Computing

Discuss in my forum

Rounded Corners with CSS 3

By

CSS 3 makes it easy to create rounded borders on elements in your web designs. You just need to know how to use the border-radius property and the related properties:

However, since CSS 3 isn't fully supported, you have to also use the -moz and -webkit browser specific properties to get it to work in Firefox and Safari.

Difficulty: Average
Time Required: 15 minutes

Here's How:

  1. Write your HTML with the element you want to have rounded corners.

    <div>This is my div with rounded corners.</div>
  2. Add a style sheet to your document (internal or external). This example is an internal style sheet in the head of the document:

    <style type="text/css">

    </style>
  3. The rounded corners won't show up unless the element has either a border or a different color background from the rest of the page. So create a class to make your box have a background color (grey in this case):

    <style type="text/css">
    .boxbg { background-color:#ccc; }
    </style>
  4. Add a class to make all four corners round:

    <style type="text/css">
    .boxbg { background-color:#ccc; }
    .all-round { }
    </style>
  5. Put in the border-radius style property.

    <style type="text/css">
    .boxbg { background-color:#ccc; }
    .all-round {
    border-radius:1em;
    }
    </style>
  6. Then add in the Firefox and Safari properties:

    <style type="text/css">
    .boxbg { background-color:#ccc; }
    .all-round {
    border-radius:1em;
    -moz-border-radius:1em;
    -webkit-border-radius:1em;

    }
    </style>
  7. And finally, add the classes to your HTML:

    <div class="boxbg all-round">This is my div with rounded corners.</div>
  8. Look at some examples of CSS 3 rounded corners.

Tips:

  1. The border-radius tags take one or two values. If you include one value, the corner will be a quarter circle. If you include two values, the rounding will be larger or smaller on the edges you indicate - the first number is the top and bottom edges of the corner. The second number is the right and left edges.

    Note: the -moz-border-radius property does not work the same way. It treats multiple values as the corners you want curved (top, right, bottom, left). You need to separate the values with a slash in this property.

    .unequal {
    border-radius: 1em 0.5em;
    -moz-border-radius: 1em/0.5em;
    -webkit-border-radius: 1em 0.5em;
    }
  2. If you're going to have single corners round, I recommend creating a separate class for each, so you can add rounded corners where ever you need them.

    .top-right-corner {
    border-top-right-radius:1em;
    -moz-border-radius-topright:1em;
    -webkit-border-top-right-radius:1em;
    }
    .top-left-corner {
    border-top-left-radius:1em;
    -moz-border-radius-topleft:1em;
    -webkit-border-top-left-radius:1em;
    }
    .bottom-right-corner {
    border-bottom-right-radius:1em;
    -moz-border-radius-bottomright:1em;
    -webkit-border-bottom-right-radius:1em;
    }
    .bottom-left-corner {
    border-bottom-left-radius:1em;
    -moz-border-radius-bottomleft:1em;
    -webkit-border-bottom-left-radius:1em;
    }

What You Need

  • HTML text editor
  • web browser

©2014 About.com. All rights reserved.