border-radius in IE9 Reverse css

Question

The best way to explain my problem is with images..

in Chrome, Firefox and Safari this is how it's show:

http://i.stack.imgur.com/Zm2QY.png

in IE9 this is how it is look:

http://i.stack.imgur.com/V9bVG.png

this is my CSS:

border: 0px solid #777777;
background: url("../image/shop.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
font: bold 0px 'Trebuchet MS';
padding: 23px 0px;

-moz-border-radius: 0px 0px 0px 13px;
-webkit-border-radius: 0px 0px 0px 13px;
-khtml-border-radius: 0px 0px 0px 13px;
border-radius: 0px 0px 0px 13px;
float: left;
width: 57px;

any idea what is going on ?? please help me out..

Answer 1

The code you posted works for me in IE9. Therefore, it could be a specificity error. A quick way to test is to add !important to the end of each of your style declarations. The better way to check is to press F12, find the element you're interested in on the left, then click Trace Styles on the right. Make sure the browser is applying the styles you entered. If it is not, click the plus buttons beside the CSS properties to determine where the style assignments are coming from.

Or you can try:

-webkit-border-bottom-left-radius: 13px;
-moz-border-radius-bottomleft: 13px;
border-bottom-left-radius: 13px;

Answer 2

this is a bug in IE9 that occurs when the element has direction: rtl; (either directly on the element with border-radius or inherited from a parent of that element).

the solution is to apply direction: ltr; on the element.