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(border-radius.htc);
}

The file “border-radius.htc”, 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 ๐Ÿ™‚

Advertisements

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s