How do I get my div corners rounded?

Glenn

Member
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?
 

Fireproofgfx

New Member
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    */
		
	
}
 

ronaldroe

Super Moderator
Staff member
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.
 

Glenn

Member
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.
 

CaldwellYSR

Member
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

Super Moderator
Staff member
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

Super Moderator
Staff member
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]
Code:
div {
border-radius: 5px 5px 0 0;
-ms-border-radius:5px 5px 0 0;
}
 
Top