How do I get my div corners rounded?

[Glenn]

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?

 

[CaldwellYSR]

Here's what google says...

Link 1
Link 2

 

[ronaldroe]

Try this

 

[Fireproofgfx]

Ronaldroe that was simply awesome!! I wonder if it works with Dragon speak... To cool.

 

[Glenn]

Try this

Well, guess what. That's where I got the code I have. And guess what, it still doesn't work.

 

[Fireproofgfx]

I just used this off of the very first link posted by Caldwell and it works like a charm

.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    */
		
	
}

 

[ronaldroe]

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.

 

[CaldwellYSR]

Yeah and that's also the 2nd link I gave :/

 

[Glenn]

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.

I checked many links. I never saw this one. It works great and many new ideas with it. Thanks.

 

[Glenn]

Yeah and that's also the 2nd link I gave :/

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.

 

[CaldwellYSR]

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.

 

[ronaldroe]

We just have to face that IE sucks compared to the other browsers.

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.

 

[PixelPusher]

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?

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]

div {
border-radius: 5px 5px 0 0;
-ms-border-radius:5px 5px 0 0;
}