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
How to Put Spacing Between Tbody Elements
What's The Key Difference Between HTML 4 and HTML 5
Flex Child Is Growing Out of Parent
Automatic Retina Images for Web Sites
Right Align and Left Align Text in Same HTML Table Cell
How Can One Close HTML Tags in Vim Quickly
What Does an Entry "Action=''" in HTML Form Mean
Web Link to Specific Whatsapp Contact
Brackets Displays Wrongly for Right to Left Display Style
CSS Selector for Text Input Fields
Relatively Position an Element Without It Taking Up Space in Document Flow
How to Change an HTML Output of Wcf Service with My Own Content
Firebug-Like Debugger for Google Chrome
Android: How to Add HTML Links Inside a Listview
How to Test a Website for Retina on Windows Without an Actual Retina Display