CSS 3 -border-radius workaround
 

I am working on my team's site, nordicstorm.dyndns.org, and I am using the -border-radius property to make the corners round. Unfortunately, this only works in Firefox and Google Chrome, but not in IE. Does anyone know of a good workaround for this? Or at the very least, a good way to identify browser type to use images instead?


Thanks,
Hans

Re: CSS 3 -border-radius workaround
 

IE9 will support this. However for all other IE's out there you can use css3pie.

Re: CSS 3 -border-radius workaround
 

You can do it the old-fashioned way and create images for each of the corners, and then use a different set of CSS rules for IE.

Here's the site I used to use back when this was the only way:
http://www.roundedcornr.com/

You could also do crazy things with VML, but that's messy and excessive.

Alternatively, just make sure the site looks good without rounded corners. This is honestly the best option. If the site really needs the corners to look good, chances are they're excessive :)

Re: CSS 3 -border-radius workaround
 

Thank you very much!

Hans

Re: CSS 3 -border-radius workaround
 

Ignore it. If users using IE8 or lower don't like square corners, they can deal with it or upgrade to a real browser.

Re: CSS 3 -border-radius workaround
 

I agree, but some team members do not, and potential sponsors are not using a real browser, it will not look quite as good.

Hans

Re: CSS 3 -border-radius workaround
 

Agreed. You could go ahead and round the corners and say site is best viewed on IE9 and Chrome blah blah.

Re: CSS 3 -border-radius workaround
 

QFT. I've started a new business, and in developing my website for it, i had to use border-radius:, -moz-border-radius, and -webkit-border-radius. IE8 and lower can GTFO. IE6 especially. KILL IT WITH FIRE!

Re: CSS 3 -border-radius workaround
 

I used CSS3-PIE for my team's website. Your team's site doesn't look bad with square corners if you don't want to do anything about IE, though.

Re: CSS 3 -border-radius workaround
 

You can use jQuery as show here:

http://jquery.malsup.com/corner/

Re: CSS 3 -border-radius workaround
 

Don't worry too much about the poor souls still using IE6. If they have to use it then it's their own fault. Ie7 and IE8 people need support still.

Re: CSS 3 -border-radius workaround
 

I think everyone has answered your question well, so I'll submit a little advice of my own towards something else.
Under your challenges page, the first logo is ~1700x700 for a ~250x100 display size. I recommend that you shrink either to size or to 4X size (500x200), because currently you are loading roughly 49X what is necessary...
Otherwise, the site looks good, keep up the good work!

Re: CSS 3 -border-radius workaround
 

Great point. Thanks for the advice.

Hans