Best way to do curves? (CSS/HTML/Images)

[GoatBotherer]

I'm not into using hacks or cluttering up the source with loads of divs. I gave up trying to make a website look exactly the same in all browsers long ago. On one of my sites I'm using CSS3 to add curves, box shadow and text shadow to my navigation bar. If the user is using a browser that doesn't support CSS3 they just get a plain version which i still think looks fine.

#navigation li a {
    border-radius:0.385em;
    -o-border-radius:0.385em;
    -icab-border-radius:0.385em;
    -khtml-border-radius:0.385em;
    -moz-border-radius:0.385em;
    -webkit-border-radius:0.385em;
}

 

[craptakular]

GoatBotherer - are you using background images?

 

[stoke1863]

IMO...

CSS3 border radius.. "WHAT ABOUT IE!!!" I hear you all scream!

CSS3PIE

Enabling shiny round corners in IE 6, 7, or 8. All you need to do is add this line to your css...

#.roundthing  {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
[SIZE="4"]behavior: url(PIE.htc);[/SIZE]
}

Simple.

quoted for truth

 

[GoatBotherer]

GoatBotherer - are you using background images?

Yup, just a 1px wide gif tiled horizontally with the highlight at the top and a gradient.

 

[thedazman67]

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