How to get border radius and gradient background working together in IE 9

Question

I used css to create a button style, but i have issue on IE9 , it works fine on Firefox

code:

 .my_box {
    -moz-box-shadow:inset 0px 1px 0px 0px #f9eca0;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;
    box-shadow:inset 0px 1px 0px 0px #f9eca0;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e) );
    background:-moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');
    background-color:#f0c911;
    -webkit-border-top-left-radius:33px;
    -moz-border-radius-topleft:33px;
    border-top-left-radius:33px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:33px;
    -moz-border-radius-bottomright:33px;
    border-bottom-right-radius:33px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #e65f44;
    display:inline-block;
    color:#c92200;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ded17c;
}

see the FIDDLE

How to make it work on IE9?

PLEASE JSfiddle answer

See http://stackoverflow.com/questions/5381446/ie9-border-radius — Jakub Kotrs, Sep 30 '13 at 10:25
check that you have set the `DOCTYPE` to `html` http://stackoverflow.com/questions/5381446/ie9-border-radius — Nick Andriopoulos, Sep 30 '13 at 10:26
IE9 problems aside, I think your [`linear-gradient()` syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) is [outdated](http://caniuse.com/#feat=css-gradients). — Passerby, Sep 30 '13 at 10:32

score 2 · Answer 1 · answered Sep 30 '13 at 10:29

2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

answered Sep 30 '13 at 10:29

Sobin Augustine · Answer 2 · 2013-09-30T10:37:16.017

1

CSS border radius will work by adding this to your page header,

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

Make sure this resides at the top of your HTML document

<!DOCTYPE html>

edited Sep 30 '13 at 10:37

answered Sep 30 '13 at 10:30

Sobin Augustine

3,639
2
25
43

score 1 · Answer 3 · answered Sep 30 '13 at 10:32

1

You can use this http://css3pie.com/ it will work for IE 6-9

answered Sep 30 '13 at 10:32

steve

1,365
4
19
33

Colin Bacon · Answer 4 · 2013-09-30T10:45:15.820

1

Try it without the filter

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');

That can override the style.

Fiddle

edited Sep 30 '13 at 10:45

answered Sep 30 '13 at 10:39

Colin Bacon

15,436
7
52
72

score 1 · Accepted Answer · answered Sep 30 '13 at 10:43

Give the element a container, with the border radius and set the overflow of the container to hidden and also give this element the border:

HTML

<div class='rounded'>
    <a href="#" class="my_box">TEXT</a>
</div>

CSS

.rounded{
    -webkit-border-top-left-radius:33px;
    -moz-border-radius-topleft:33px;
    border-top-left-radius:33px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:33px;
    -moz-border-radius-bottomright:33px;
    border-bottom-right-radius:33px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    overflow:hidden;
    display:inline-block;
    border:1px solid #e65f44;
}

JSFiddle

Tried and tested in IE 9

score 0 · Answer 6 · answered Sep 30 '13 at 10:32

Try this:

-webkit-border-top-right-radius: 36px;
-webkit-border-bottom-left-radius: 36px;
-moz-border-radius-topright: 36px;
-moz-border-radius-bottomleft: 36px;
border-top-right-radius: 36px;
border-bottom-left-radius: 36px;

you can create border radius by border-radius.com

How to get border radius and gradient background working together in IE 9

6 Answers6