IE8 Rounded Corners using jQuery

This site continues to receive a large amount of traffic from people searching for a solution to achieving rounded corners in IE8. Clearly, it’s a hot topic, and my previous post about using DD_Roundies has hopefully helped developers along their way.

I recently had an issue with DD_Roundies where the border width was 1 pixel out. Not sure why, but it prompted me to look for another solution. A simple plea for help on twitter resulted in the discovery of another library, and this time one built as a jQuery plugin.

Check out cornerz. It’s easy to use and so far, works like a charm.

Tags: , ,

3 Comments

1001 Fonts commented on November 17th, 2009 at 10:18 pm

Finally a solution for IE8, but for me it doesn’t respect the background colors of parent containers so I am seeing rounded corners with the cut out parts being white instead of transparent or the parent’s background-color :( This makes the plugin useless for me. I am just about to give up on IE8.

badlyDrawnToy commented on November 17th, 2009 at 10:47 pm

@1008. Have you tried setting the background colour as one of the options?

e.g. $(‘.myclass’).cornerz( {
‘radius’ : 12,
‘corners’ : ‘bl’,
‘background’ : ‘#000′
} )

Marco Barbosa commented on February 3rd, 2010 at 6:16 pm

I had the same problem as 1001 Fonts.

It won’t work well with a background..

Setting the color doesn’t work because the background is an image not just a color.

Guess I’ll have to wait. There’s not good solution for rounded corners on IE8 today.

Leave a Reply

CAPTCHA Image CAPTCHA Audio
Refresh Image

Colophon

badlyDrawnToy is the blog of Howie Weiner, a freelance web developer, based in Manchester.

Microbubble Web Design - freelance web design manchester, stockport, cheshire

His company, Microbubble Web Design, specialises in PHP and Java web applications, Search Engine Optimisation, custom CMS and web development.

View Howie Weiner's profile on LinkedIn
View Howie's twitter feed