How to Make Rounded Border in Ie8 with CSS

CSS rounded corners in IE8

Internet Explorer (under version 9) does not natively support rounded corners.

There's an amazing script that will magically add it for you: CSS3 PIE.

I've used it a lot of times, with amazing results.

How to apply border radius in IE8 and below IE8 browsers?

Option 1

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

Option 2

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Option 3

http://css3pie.com/

Option 4

http://www.netzgesta.de/corner/

Option 5

See this question

EDIT:
Option 6

https://code.google.com/p/jquerycurvycorners/

Creating rounded corners in IE7 / IE8

IE 7/8 do not support border-radius. I hear IE9 does though.

This site contains a hack for getting rounded borders in IE7/8 though: http://dimox.net/cross-browser-border-radius-rounded-corners/ . You'll need to download border-radius.htc and put the following code in your CSS:

.rounded-corners {
behavior: url(http://yoursite.com/border-radius.htc);
}

How to make rounded border in IE8 with CSS?

There's a jQuery plugin for that. http://jquery.malsup.com/corner/

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.



Related Topics



Leave a reply



Submit