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/
Does not work border-radius IE8
Standalone .htc hack is not working for background gradient
and border-radius
both at the same time.
Try to replace css gradient
with simple image. This trick will work.
Also you can use css3pie (thanks to @dop-trois) — this pure Javascript tool is more perfect than standalone .htc
file.
PS. Inset box-shadow
s cannot be implemented in both solutions.
PPS: the code you need is here: (i changed it a bit to make it more valid and correct):
.mc-button {
font: bold 11px/29px Arial, Helvetica, sans-serif !important;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border: 1px solid #DCDCDC;
height: 29px;
min-width: 70px;
padding: 0 8px !important;
overflow: visible;
display: block;
float: left;
/* Unique link for this gradient — http://www.colorzilla.com/gradient-editor/#cbcbcb+0,dcdcdc+100;Custom */
background-color: #CBCBCB;
background: -moz-linear-gradient(top, rgba(203,203,203,1) 0%, rgba(220,220,220,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,203,203,1)), color-stop(100%,rgba(220,220,220,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* W3C */
/* css3 stuff below: (via css3please.com) */
/* no one prefix except `-webkit` is needed nowadays for `border-radius` */
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.218s ease-out;
-moz-transition: all 0.218s ease-out;
-ms-transition: all 0.218s ease-out;
-o-transition: all 0.218s ease-out;
transition: all 0.218s ease-out;
/* PIE specific accordingly http://css3pie.com/documentation/q-and-a/ */
behavior: url(PIE.htc);
}
You should be sure that you have included PIE.htc
correctly (important!)
Relative questions
- Using CSS3Pie htc for border-radius in IE8
- CSS3 PIE - Giving IE border-radius support not working?
- CSS3 PIE - Giving IE border-radius support not working?
Accordingly to answers possible problems may be in mime type ("text/x-component").
Also possible solution may be:
position: relative;
z-index: 0;
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.
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);
}
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.
Related Topics
@Media Media Query and ASP.NET MVC Razor Syntax Clash
How to Watch Changes in Whole Directory/Folder Containing Many SASS Files
Cross-Fade Between Images with CSS in Loop
Why Doesn't This CSS :Not() Declaration Filter Down
Clip-Path Without Clipping Content
Less Lists as a Mixin Argument(S)
Combining :Not() Selectors in CSS
Select an Element with Empty Class Attribute (Class="") Using CSS
Twitter Bootstrap: Div in Container with 100% Height
Remove Border Radius from Select Tag in Bootstrap 3
Input Type="Image" Shows Unwanted Border in Chrome and Broken Link in IE7
CSS Blur on Background Image But Not on Content
How to Center Content and Make the Background Cover the Full Column When Using CSS Grid