CSS rounded corners

Posted by Stanislav Furman  on February 26, 2012

Basic approach and main idea

Very often, web designers use CSS rounded corners to make websites nicer. This blog uses rounded corners too. You could use different methods to create rounded corners on your web site, but from my point of view the simplest one of these methods is the method that uses CSS3.

Unfortunately, this method won't work in IE (what a surprise!), but, fortunately, there is a hack exists that can fix this problem.

For most of web browsers the following code will work:


<style>
#container {
  width: 200px;
  height: 200px;
  background-color: #cccccc;	
}
.rounded {
  -moz-border-radius: 10px; /* Works in Firefox */
  -webkit-border-radius: 10px; /* Works in Safari, Chrome */
  border-radius: 10px; /* It's CSS3 */
}
</style>

<div id="container" class="rounded"></div>

Fixing problem with IE

However, as I have already mentioned this won't work in IE. To fix this problem we will need to download the border-radius.htc file, and put it somewhere on your site. Then you could use the following CSS in the HTML header section:


<!--[if lte IE 8]>
<style type="text/css">
.rounded{
    behavior: url(border-radius.htc);
}
</style>
<![endif]-->

Another method that you could use is the method when you create rounded corners (top and bottom) in graphic editor (i.e. Photoshop) and then put those images as images or backgrounds on the top/bottom of the div or table cell.

At the end you should see something like this:

CSS roundedcorners

Have fun!


Leave your comment

Fields with * are required.

* When you submit a comment, you agree with Terms and Conditions of Use.