CSS 3 -border-radius workaround

[HansJ]

I am working on my team's site, nordicstorm.dyndns.org (http://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

[GGCO]

IE9 will support this. However for all other IE's out there you can use css3pie (http://css3pie.com/).

[zbanks]

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 (http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8) 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 (http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/), 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 :)

[HansJ]

Thank you very much!

Hans

[artdutra04]

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

[HansJ]

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

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

[Dustin Shadbolt]

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

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

[Racer26]

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

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!

[Joseph Bisch]

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.

[Chris27]

You can use jQuery as show here:

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

[GGCO]

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.

[ahollenbach]

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 (http://nordicstorm.dyndns.org/index.cgi?page=challenge), 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!

[HansJ]

Great point. Thanks for the advice.

Hans