round corners IE7

**BrutusUnix** · 05-29-2008 02:01 PM

I have round corners working in firefox but not in IE 7.

My CSS:

Code:

#right {
	font-align:left;
	background-color:#edf5e0;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	padding: 0px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
}

What tag will work in IE7?
Thanks!!!

**GoverNment** · 05-29-2008 02:13 PM

can you please post a sample page where i can see what your trying to completely accomplish-
thanks
GoverNment

**BrutusUnix** · 05-29-2008 02:20 PM

no place to put it.
copy paste the example code:

Code:

<html>
<head>
<style type="text/css">
#right {
	font-align:left;
	background-color:#edf5e0;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	padding: 0px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	background-color: #cccccc;
}
</style>
</head>
<body>
	 <div id="right">
	make everything in this have a background and also make it have round corners
	</div>
</body>
</html>

**WebJoel** · 05-29-2008 06:16 PM

You're using a CSS3 and IE doesn't even fully support CSS2 yet. You might be able to 'trick' IE7 into thinking it is IE8 though, by adding this:

exactly as typed (copy & paste), add just before the "</head>"

This 'fix' corrects many problems with IE-less-than-8

**Centauri** · 05-29-2008 06:41 PM

border-radius is a yet to be finalised css3 property, and I doubt that IE would support it for another 5 years or so after css3 is finalised....

**risingPhoenix** · 05-29-2008 11:21 PM

Do you want to have only the top and bottom of your website to be rounded?

If yes, you could also create two images that have rounded corners and place those images at the top and bottom of your website. You can check the website I'm building - http://mattjennings.net/002natalie/ - for an example.

**WebJoel** · 05-30-2008 06:40 AM

Firefox and Opera (current versions) both support border-radius for roundy-edges.

And oh btw I forget to mention it last night:

#right {
font-align:left;
background-color:#edf5e0;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
padding: 0px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
background-color: #cccccc;
}

No such property in CSS. You want text-align:left;"

**extendstudio** · 05-17-2010 08:03 AM

You can have a look as well at FlexiPanels CSS - a Dreamweaver extension that makes rounded corner CSS boxes without coding. Works on IE 6, 7 and u

**svidgen** · 05-17-2010 08:55 AM

Or use my rounded corner generator: http://www.svidgen.com/rcg.php. I'm 90% sure it works down to IE6 ... possibly earlier. You're just not going to find a fully cross-browser compatible CSS-only solution.

**ajberry** · 05-18-2010 07:41 AM

I usually do the same as risingPhoenix. Sucks I know, but welcome to the world of IE and css

**svidgen** · 05-18-2010 08:51 AM

My generator uses a single image to create the effect. Saves you a lot of HTTP requests ..

**oritzio** · 05-24-2011 04:30 AM

I've been checking this one, and it's working in all those:

- IE
- Firefox
- Chrome
- Safari
- Opera

Demo: http://oritzio.com/pages/demos/CssRoundedCorners/

**trandrus** · 05-24-2011 03:36 PM

javascript+vml:
http://www.dillerdesign.com/experiment/DD_roundies/

css+htc:
http://css3pie.com/

I like css+htc solution because I don't have to use javascript to fix presentation.

**syntel** · 05-29-2011 09:41 AM

Originally Posted by oritzio

I've been checking this one, and it's working in all those:

- IE
- Firefox
- Chrome
- Safari
- Opera

Demo: http://oritzio.com/pages/demos/CssRoundedCorners/

This works, but my problem is with a nested DIV and margin or padding. It breaks the javascript rendering.

<div class="rounded">

**syntel** · 05-29-2011 09:43 AM

Originally Posted by syntel

This works, but my problem is with a nested DIV and margin or padding. It breaks the javascript rendering.

<div class="rounded">

Example:

<div class="rounded"><div class="padded>
Text
</div></div>

Shawn Zernik
Internetwork Consulting

Thread: round corners IE7

Thread Tools

Display

round corners IE7

Rounded corners - Working on IE

Rounded corners work, but...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions