Rounded corner button for IE8

I am creating a rounded corner background image, it looks good in IE9, Firefox, Chrome etc.开发者_JS百科 but it look flat in IE8/IE7. Here is my HTML:

<div  class="rounded-box"></div>

And here is my CSS:

.rounded-box {

    width: 455px !important;
    display: block;
    padding: 6px 10px;
    width:435px;
    height:28px;
    font: 13px Georgia;
    border: 1px solid #bbb;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#ffffff));
    background: -moz-linear-gradient(top, #ffffff, #ffffff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
    -webkit-box-shadow: 0 -1px 0 rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.7);
    -moz-box-shadow: 0 -1px 0 rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.7);
    box-shadow: 0 -1px 0 rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.7);
    -webkit-background-clip: padding-box;
    margin:0 auto;
    margin-bottom:10px;
}

So, can you please help me here for IE8 / IE7 ?

Thanks Balkar

Try this one, thanks to Worthapost.com (original post from: http://www.worthapost.com )

CSS:

.container {
        display: block;
        width: 600;
        position: absolute;        

    }

    .content {
        background: #e4e4e4;
        font-weight: bold;
        padding: 3px;
    }

    .round_span3 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 3px;
    }

    .round_span2 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 2px;
    }

    .round_span1 {
        background: #e4e4e4;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 1px;
    }

HTML:

<div class="container">
    <span class="round_span3"></span>
    <span class="round_span2"></span>
    <span class="round_span1"></span>
    <div class="content">
        <!-- Content goes here --> My name is Bond
        <br/>
        James Bond
    </div>
    <span class="round_span1"></span>
    <span class="round_span2"></span>
    <span class="round_span3"></span>
</div>

UPDATE: demo link http://jsfiddle

You could try this: http://css3pie.com/