Wednesday, May 9, 2012

Rounded Corners on IE 6, 7, and 8

As a web developer, I have discovered CSS3. It works wonders but it's fantastic features work great only on the most recent browsers. And I work for a company that still uses IE 7 and IE 8, so I have to cater to that group.
On my latest build of a site, I wanted to add the rounded corners and have it available for IE too. I searched and found CurvyCorners. I tried it but to no avail. I finally moved on after an hour with more searching on Google. I landed on CSS3 PIE and this worked like a charm for me. Just follow the simple instructions on their documentation and getting started page. Before you knew it, I had my universal look and feel that I can use on all my sites.

Essentially, you upload your behavior file (.htc) and refer to it on your class or id. Simple and useful.

.roundedcorners
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-khtml-border-radius:15px;
-o-border-radius: 15px;
border-radius:15px;
behavior: url(js/PIE.htc);
}

This is a web developer resource I will use a handful more times. Hope you like it!