Everyone is curious about making rounded borders show in every browser, whether it’s Firefox, Safari or Internet Explorer. The answer is really simple: we can use the css styles for all the browsers alone, plus make a little different workaround for Internet Explorer family.

So, here is the plan. We have a Firefox style we all know:

-moz-border-radius: 20px;

Next, we have a WebKit style for Safari, Chrome and other WebKit browsers:

-webkit-border-radius: 20px;

For Linux users we have the styles too:

-khtml-border-radius: 20px;

Now, we have one more awesome browser left – Opera. With version 10.50, Opera supports even more CSS3 styles, so we put a standard here:

border-radius: 20px;

Since border-radius is a w3c standard style, we’ll use it for IE too. Now, we all know IE is retarded, and we always have to beat the wall with our heads to find a way for it to work. And, thanks God, since IE8 our life is a little simpler, but still a lot of users use 6 and 7, and they need support too.

So, let’s download a very nice .htc file for Internet Explorer users. Now, include this file in css styles:

behavior: url("border-radius.htc");

Note: the path for behavior is relative to the page loaded, not to css file. So, please, take that in mind.

The final version will look like this:

.curved {
behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */
}

See the example here and feel free to leave any comments

• Previous Entry: 20 awesome triple display wallpapers
• Next Entry: Free HQ Stock Easter Vector Images