Rounded Corners with CSS 3

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