CSS3 Border Radius property doesn't work in localhost?


I'm having a very strange problem with css3 border radius property. My following CSS and html works fine with IE9 if i double click the file and open with the IE9 , however if the border property does not work in IE if i open the file through LOCALHOST (xampp insatlled on windows 7). The same file works fine on localhost with other browsers. How can i fix it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style media="all" type="text/css">@import "circle.css";</style>
<div class="exampleborderradiusf">F</div>

and the CSS is:

.exampleborderradiusf {
    background-color: #464646;
    margin-top: 20px;
    margin-right: 40px;
    width: 70px;
    height: 70px;
    text-align: center;    
    -moz-border-radius: 35px;
    border-radius: 35px;
    color: white;
    font-size: 20px;
    position: relative;
    top: 20px;

Thanks for the help.

Problem courtesy of: user966582


IE9 is, of course, still in beta, so will have bugs and incomplete features. Its possible you may have stumbled on one of them.

I can't think of too many reasons why a CSS style would stop working while others in the same CSS file continue to work.

Have you checked that IE is still in IE9 mode, and not in IE8-compat mode or something like that. I can see that this sort of thing may change depending on the zone - I've seen similar things happen in IE8 where there's an obscure config setting that can make it switch over to IE7-compat mode when browsing within a local intranet.

Solution courtesy of: Spudley


just an idea (but i've never heard of such a problem): could you please try to reference your css-file like this:

<link rel="stylesheet" type="text/css" href="circle.css" />

instead of

<style media="all" type="text/css">@import "circle.css";</style>

EDIT: are the other styling-rules applied correctly? if so, please just ignore my idea... this is for "the whole stylesheet isn't loaded" - you havn't given exact information about that.

Discussion courtesy of: oezi

ackkk - i just discovered the same wierdness - exact same page coming from my public server renders fine - coming from localhost - no border-radius

and then hit F12 on your page and you may discover that for some unhinged reason your localhost file is displaying in IE7 mode so i stuck this on my page:

meta http-equiv="X-UA-Compatible" content="IE=9000"

it worked need to research some more but i think you can monkey with IIS to get this automated this stupid problem was not a good way to spend friday night

Discussion courtesy of: antony Ty

Is your local server delivering the style sheet with the correct MIME-type (text/css)?

Discussion courtesy of: RoToRa

This is just a thought, but shouldn't:

<style media="all" type="text/css">@import "circle.css";</style>

be, instead:

<style media="all" type="text/css">@import url("circle.css");</style>

Of course, this wouldn't (or at least shouldn't) explain why the stylesheet isn't being loaded locally; and if some styles other than the border-radius ones are being loaded/applied then this answer isn't applicable anyway.

Discussion courtesy of: David Thomas

This recipe can be found in it's original form on Stack Over Flow.