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 do I use CSS to create rounded corners in IE 8?
After a lot of research, I have found that there is a fix similar to the PNG transparancy fix available to IE6, called CSS3Pie. The website to the solution is found here: http://css3pie.com
You will simply have to add behavior: url(path/to/pie_files/PIE.htc);
to your css anywhere you wish to implement rounded corners.
#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/pie_files/PIE.htc);
}
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.
How to make rounded border in IE8 with CSS?
There's a jQuery plugin for that. http://jquery.malsup.com/corner/
Related Topics
Bug in CSS3 Rotatey Transition on Safari
How to Make Sure Select Option Text Align in the Center in Ie
Inner Border Over Images with CSS
Next.Js Global CSS Cannot Be Imported from Files Other Than Your Custom <App>
Is Box Sizing Inherited If Declared Inside Universal Selector
Why Does My Django Admin Site Not Have Styles/CSS Loading
Can You Set a Border Opacity in Css
How to Use Apple's New San Francisco Font on a Webpage
How to Remove Blue "Selected" Outline on Buttons
How to Create Multiple Borders Around Existing Border of Circle
Print Styles: How to Ensure Image Doesn't Span a Page Break
How to Use Camelcase in CSS Class Names
Nth-Child for Every Two Table Rows
Webkit CSS Content Unicode Bug