Rounded Corners in Ms Ie 7

Rounded corners in MS IE 7

I'd recommend using CSS3 styling and then CSS3PIE. Works like a charm!

Rounded corners in MS IE 7 - on Intranet with no access to the outside world - and no JS/HTC

There are a few ways to do it -

SpiffyCorners - http://spiffycorners.com/

With images - http://modxcms.com/about/team/rthrash/simple-rounded-corner-css-boxes.html

MS VML - http://www.notgeeklycorrect.com/web-development/2010/01/21/easy-rounded-corners-working-in-ie7ie8

Google around there are tons of ways to do this without CSS3.

Rounded corners for internet explorer

border-radius property works on IE9=+ so if you are trying it on IE8 <= than it wont work, better use jQuery instead

http://www.malsup.com/jquery/corner/

Also use this website to check CSS property support for various browser, very handy for developers

www.caniuse.com

Support for border-radius in IE

Yes! When IE9 is released in Jan 2011.

Let's say you want an even 15px on all four sides:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.

-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.

Furthermore: don't forget to declare your IE coding is ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.

Border radius not supporting in IE7

You can use CSS3 PIE to get this working.

To get it add the pie.htc file to the ROOT of your site. In your CSS file where you want to use border-radius add the following code:

behavior: url(path/to/PIE.htc);

In normal CSS the url is relative to the CSS file. For htc files it is relative to the ROOT of your website. This is important as it won't work otherwise. Blame Microsoft.

NOTE:

If it's not working still then add this to your selectors:

position: relative;
z-index: 0;

CSS - border-radius doesn't display in IE6/7/8

As of IE8, IE doesn't support the CSS3 border-radius property. Not sure what you saw that said it did. You can use images, javascript, or many other tricks to round corners in IE.

CSS3 Rounded Corners are not working in IE quirks mode

Quirks mode do not support CSS3, and CSS behaviors were disabled in IE10. You can set header to IE=edge and forget about Quirks mode.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Look at http://border-radius.com/.

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

Emulating CSS3 border-radius and box-shadow in IE7/8

This is my method, I use the conditionals to target CSS files to IE browsers.

Say you have your div with the id #page_container. In your regular master.css or css3.css file, you would give it your width, height, rounded corners and drop shadow with styles.

Now, when IE hits your page, it will pull in the condition css you had set up. For that same div#page_container, you may alter the width a bit, height, maybe some padding, then give it a background-image to make it look like the drop shadow, rounded-corner version.

So your head will have this:

<head>
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>

In the master.css file, you would have this definition for your main div:

div#page_container {
  width: 960px;
  height: auto;
  padding: 10px 10px 10px 10px;
  background: #ccc;
  drop-shadow: whatever...
  rounded-corner: whatever...
}

Now, in your ie.css file, and because it is referenced in your second, the definition will cascade down so you can alter it a bit:

div#page_container {
  width: 960px;
  height: auto;
  padding: 15px 15px 15px 15px; /* this is key */
  background: #ccc url(/path/to/image.file) no-repeat top left;
}

Add just enough extra padding so the drop shadows fit in with your background-image. Because it cascades down, it will overwrite the original 10px padding you had, expanding the box model to fit in your extra shadow graphics.

Couple benefits to this method include:

Only IE will see this definition and the call to the image. If this is a high volume app, that will save on bandwidth and any delays associated with the call.
Likewise, because you didn't hard code in the rounded corner graphics that every browser would see, your Firefox and Safari users won't need hit the server with extra image calls.
No need to add in yet another javascript plug-in that checks for IE, creates new markup, time, etc...

Rounded corners not working in IE (.rounded-corners)

Can't you just use:

.ie6 .rounded-corners, .ie7 .rounded-corners, .ie8 .rounded-corners, .ie9 .rounded-corners {
  behavior: url(border-radius.htc);
  border-radius: 4px; /* example */
}

It also assures that it tries also the CSS way of rounding the corner.

Rounded Corners in Ms Ie 7