CODEWITHSUNDEEP
internet-explorercssinternet-explorer-9rounded-corners
coder
coder

Reputation: 13248

Rounded Corners in IE9

I am trying to place a seperate CSS for all the versions of IE and trying to work with the below CSS but it's not giving me any rounded corners.

Can anyone point me out the right path

Here is my CSS:

   -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:230px;
    z-index:150;
    border:1px transparent;
    text-align:left;
    top: 24.5px; 
    right:84px; 
    margin-top:-53px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
    padding: 5px;

And I tried by adding below url's none worked out for me and I think they work absolutely perfect as beore I have used them and then it worked well but in this case something went wrong with my css part.

behavior url('css/PIE.htc')
behavior url('css/ie-css.htc')
behavior url('css/border-radius.htc')

Upvotes: 0

Views: 357

Answers (2)

Jonah Bishop
Jonah Bishop

Reputation: 12581

You are using vendor-specific rules in your CSS. Use the "standardized" version for IE9:

border-radius: 5px 0 5px 5px;

The -moz- specific rules can be shortened in a similar manner. Webkit (to my knowledge) doesn't allow the short form.

Here's some additional information: border-radius.

Upvotes: 4

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93434

Add border-radius-topleft:5px; border-radius-bottomleft:5px; border-radius-bottomright:5px;

Upvotes: 1

Related Questions