Rounded Corners

[shuma]

Hi guys.

Just watch #24: Rounded Corners and wondering wich of the five metodes is
best cross compatibility? Any thoughts?

metod nr 3(morzilla bordius) was only if your know your target users

So we have 4 left!

/ shuma

[jamygolden]

It depends how big the website is. CSS3PIE supports rounded corners pretty nicely. I’ve used it twice now and it seems to work nicely. Try it after you are finished with your site and see if it works nicely in IE 6-8.

If not(And for hardcore IE stability and maximum flexibility), I would use the method where there are 4 divs in each corner that is inserted via javascript (I can’t remember which #number that is in Chris’ video… I think number 5)

[shuma]

The things is I have checkt CSS3PIE before and one thing that really bugs me is
that when you run it on ie6-7 it takes som sec before the box gets round.
Do you now what I mean? So mabye doing it with the 4 divs is and JQuery is the way to go or if somebody else have some ides

[Startupt]

Hi Shuma, i would say to use border-radius whit the -moz- prefix to support Firefox and do not worry about IE as IE9 already supports the border-radius property. (I know it will take ages until the IE users will update to IE9)

[shuma]

Hi Startupt,
I would like to use the border-radius with the-moz- prefix but the thing is users of the site is going to be more IE6-IE8 then IE9, chrome or firefox.

I am trying to find the best cross browsing solution, and it bugs me very much that CSS3PIE is like that becuse it would be a very easy to implement it with that.

[Chris Coyier]

With many users still using windows xp, they can’t update to IE9 since it is only supported by Vista and 7. @Shuma, I use images for my top and bottom sections to get the rounded corners. It seems to help with cross browser compatibility.

[shuma]

Hi CWDESIGN

I do not feel comfortable using images for my top and bottom sections to get the rounded corners, I dont now why.

But If we look at Appels webbsite, what kind of method do they use? Does anybody know?

[jamygolden]

I just had a look at apple.com and they use a few methods. Images at the top and bottom (Personally, I really don’t like that method), entire images and CSS3 (on less important items).

[Chris Coyier]

I like using CSS as much as possible. However with my section to get rounded corners, I had to use top and bottom images. It saves a lot of time and headaches trying to code it to look the same in all browsers and browser versions.

[shuma]

Jamy_za: I check out with firebug and your right they used a few methods. I think to much work and not a great ide… it is to fuzzy.

CWDESIGN: Maybe your right =) .. it will solve the web browsers compatibility and browser versions problem. My question is does take longer to load the website if you use images?

I like to use CSS3PIE but I think the user will get a bad idea, if they wait a few sec before the rounded corners implements to the site. It will feel like a hack / bug.

What do you guys think of CSS3PIE, or is it just me who is a perfectionist ?

[Chris Coyier]

It has not effected my loading time. Mine load right along with the CSS code.

[shuma]

Thanks for all the answers, you guys are the best =)

[Author]

Posts