Home

The best way to add rounded corners using CSS and HTML

Created May 7, 2010

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>