border-top-left-radius not working in IE

问题

I'm using IE10 to design something at the moment [Because it needs to be completely compatible with it], and I'm having trouble.

I have two boxes on either side of the page, with an image at the top. The inner top corner is curved using border-top-*-radius, and this is also implemented on the image inside.

CSS:

   #rightsidebar {
    position:fixed;
    width: 300px;
    height: 400px;
    padding: 10px;
    margin: 0px 0 0 500px;
    border-top-left-radius: 110px;
    -webkit-border-top-left-radius: 110px;
    background-color: #ffffff;
    border: 2px dashed #000000;
}

#leftsidebar {
    position:fixed;
    width: 300px;
    height: 400px;
    padding: 10px;
    margin: 0px 0 0 0px;
    border-top-right-radius: 110px;
    -webkit-border-top-right-radius: 110px;
    background-color: #ffffff;
    border: 2px dashed #000000;
}

HTML:

<div id="rightsidebar">
            <img style="background-color: #000000; width:300px; height:196px; border-top-left-radius:105px; -webkit-border-top-left-radius:110px;" src="{image:right image}">
</div>

<div id="leftsidebar">
            <img style="background-color: #000000; width: 300px; height: 196px; border-top-right-radius: 105px; -webkit-border-top-right-radius: 105px;"src="{image:left image}">
</div>

My JSFiddle is here: http://jsfiddle.net/V73G5/

Using IE, you can see that the right container's image isn't doing the same as the left's, even though I just copy and pasted the code and edited it slightly. It does however work on Chrome, which makes me think this may be a bug. Any insight or suggestions on how to resolve this?

EDIT: I've found a way to work around it using:

border-radius: 105px 1px 0 0;

It's not a proper solution, and I've still no clue as to why this happened in the first place, but the 1px is barely noticeable and seems to make it work.

回答1:

The behaviour of border radius is affected by compatibility mode in IE10.

If you press F12 you can view the developer console and change the compatability settings.

If the Document mode is set to IE7 or IE8 Standards then the border-radius-left: 10px; doesn't work, however if the standards mode is set to IE9 Standards or Standards then it behaves as expected.

回答2:

download PIE.htc file and attached your css

      #rightsidebar {
                     border-radius: 8px;
                     behavior: url(/pie/PIE.htc); 
                    }

for more details check below image one.

may it will help you.

来源：https://stackoverflow.com/questions/19830440/border-top-left-radius-not-working-in-ie

标签

css

internet-explorer-10

css3