How do I get my div corners rounded?

Glenn · 04-09-2012, 08:35 PM

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 · 04-09-2012, 09:07 PM

Here's what google says...

Link 1
Link 2

**ronaldroe** · 04-10-2012, 02:20 AM

Try this

Fireproofgfx · 04-10-2012, 03:28 AM

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

Glenn · 04-10-2012, 03:30 AM

Quote:

Originally Posted by ronaldroe

Try this

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

Fireproofgfx · 04-10-2012, 03:43 AM

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

PHP Code:


			
.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** · 04-10-2012, 05:16 AM

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 · 04-10-2012, 12:29 PM

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

Glenn · 04-10-2012, 02:16 PM

Quote:

Originally Posted by 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.

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

Glenn · 04-10-2012, 02:17 PM

Quote:

Originally Posted by CaldwellYSR

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.

04-09-2012, 08:35 PM	#1
Glenn Silver Member Join Date: Aug 2011 Location: Tennessee Posts: 125	How do I get my div corners rounded? 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?

04-09-2012, 09:07 PM	#2
CaldwellYSR Platinum Member Join Date: Jun 2011 Location: Riverton, WY Posts: 658	Here's what google says... Link 1 Link 2 __________________ Matthew Caldwell ~ Krymson Productions ~ E-Mail Me

04-10-2012, 02:20 AM	#3
ronaldroe Diamond Member Join Date: Jan 2011 Location: Oklahoma City, OK Posts: 1,013	Try this CaldwellYSR and Fireproofgfx like this. __________________ Ronald Roe Web Designer/Front-end Developer Useful: CSS-only Dropdown Menu \| jQuery Help \| What Should I Learn? \| Box Model \| Media Queries

04-10-2012, 03:43 AM	#6
Fireproofgfx Silver Member Join Date: Jul 2011 Location: WAshington Posts: 151	I just used this off of the very first link posted by Caldwell and it works like a charm PHP Code: `.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 */ }`

04-10-2012, 05:16 AM	#7
ronaldroe Diamond Member Join Date: Jan 2011 Location: Oklahoma City, OK Posts: 1,013	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. __________________ Ronald Roe Web Designer/Front-end Developer Useful: CSS-only Dropdown Menu \| jQuery Help \| What Should I Learn? \| Box Model \| Media Queries

04-10-2012, 03:28 AM	#4
Fireproofgfx Silver Member Join Date: Jul 2011 Location: WAshington Posts: 151	Ronaldroe that was simply awesome!! I wonder if it works with Dragon speak... To cool.

04-10-2012, 12:29 PM	#8
CaldwellYSR Platinum Member Join Date: Jun 2011 Location: Riverton, WY Posts: 658	Yeah and that's also the 2nd link I gave :/ __________________ Matthew Caldwell ~ Krymson Productions ~ E-Mail Me

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode