Rounded Corners in HTML

Previously, rounded corners in HTML was a difficult job, since we were obliged to use images and complex html to build a small section with rounded corners.

After doing some research, I found a small method to design the div and give it a rounded corner shape:

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
But this styling only will work on FireFox, Safari, and Chrome.

Now, with CSS 3, this became a simple easy job and compatible with all kind of browsers, especially after I read an article talking about this kind of styling. With the help of the Curved-Corner CSS , we can add the rounded corner layout to any section in the HTML page, and also compatible with any browser:

.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(;

The file “”, that can be downloaded from the Curved-Corner CSS , will do this job and we will end up with:

So from now on, no more images and complex styling. Rounded Corners are piece of cake now 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s