There are many ways out there to create simple rounded corners in CSS and HTML; however, some of them are combersome and they either take up a lot of code or they require you to use images. The easiest and best way that I have found for adding rounded corners to boxes in CSS (compatible with latest browsers) is the following:

Add this code to your style sheet:

#box
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display:block;
background:#555555;
color:#fff;
padding:10px;
font-weight:bold;
}

Then you'll add the following html and you'll have rounded corners

<div id="box">
This way using -moz-border-radius: 5px, -webkit-border-radius: 5px, and border-radius: 5px will display a radius of 5 pixels around your block. Such as this surrounding div.
</div>

Login

or Sign Up

Sign Up

or Login
×
tnylea
Cheers Friend!

I'm Tony, the creator of this site. I'm trying to increase my twitter following. Want to follow me?

Follow @tnylea If not, no worries :)