Here is what I have defined. border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -o-border-top-left-radius: 10px; -o-border-top-right-radius: 10px; -ie-border-top-left-radius: 10px; -ie-border-top-right-radius: 10px; All work except, drum roll please, Internet Explorer. How do I get the rounded corners in IE?
I just used this off of the very first link posted by Caldwell and it works like a charm PHP: .tst_cnt { background-color:#a8a8a8; margin: auto; height: 100%; width: 831px; -moz-border-radius: 20px; /* HERE */ -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; /* TO HERE */ }
Fireproof, yours won't work in IE 8 and below. 6 and 7 are damn near irrelevant, but unfortunately, 8 still is. Glenn, you can't always just go with the first search result. A few results down was CSS3PIE, which is the answer you're looking for.
No, it wasn't. I used that one originally and it did not work either. We just have to face that IE sucks compared to the other browsers.
Ahem.... actually Glen my second link says the best way to do it is the CSS Pie which is what Ronald was talking about. If that doesn't work the next best thing is the images it was talking about which will definitely work 100% of the time it's just not a great practice. Yes IE sucks but you can make it work using the links we gave you.
That's pretty much the standard. I've reached the point where I don't really worry about IE too much. I make sure my designs at least present a readable experience in IE8 and 9, and that's it. Otherwise, you waste too much time reworking everything. My theory regarding a lot of the effects, especially rounded corners, is that if you don't know that it should be there, you really aren't missing it.
Because im an advocate of the neatest/smallest code possible...border-radius also has a short hand property: border-radius: [top left] [top right] [bottom right] [bottom left] Code: div { border-radius: 5px 5px 0 0; -ms-border-radius:5px 5px 0 0; }
