Question

I want to get rounded corners in IE6 – 9 I am using the following css code for firefox, Chrome and Safari and works fine, is there a way you can do rounded corners in IE6 without using background images?

css code:

.item{

   height:85px;
   line-height: 15px;
    text-align: center;


}

.item-header > div{

}
.item > div {
  background-color: #fff;
  height:85px;
  margin-bottom:10px;

}
.item-header > div:first-child{
    width:88px;
}

.item > div:first-child {
  border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
   border-left:2px solid #ededed;

}

.item-header > div:last-child{

}

.item > div:last-child {
  border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
   border-right:2px solid #ededed;
   margin-top:2px solid #ededed;
     margin-bottom:2px solid #ededed;

}

.itemHeader, .itemBody, .itemFlag, .item-header-content{
    float:left;

}

.itemHeader{
    width:85px;
    padding-top:10px;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
    height:85px;
}

.itemBody{
    width:80px;
    height:85px;
    padding-top:10px;
    border-left:1px solid #ededed;
    border-right:1px solid #ededed;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
}

.itemFlag{
    width:80px;
    padding-top:10px;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
    height:85px;
}

.item-header-content{
    width:82px;
    height:50px;
    float:left;

}
.item-header-content a{
    padding:0px;
    margin:0px;
    text-align: center;
    color:#000;
}

.resize {
width: 80px;
height : auto;
margin-top:10px;

}

.Container-results{
    width:790px;
    border-spacing:0 1px;
    margin-left:1px;
    margin-right:1px;
    margin-bottom:10px;

Html code:

<div class="Container-results">

                <div class="item">
                    <div class="itemHeader"> 

                    </div>
                    <div class="itemBody"> <strong style="font-size: 100%; color: #004A9E;">Roadside</strong></div>
                    <div class="itemBody"><div class="tick"><span>included</span></div></div>
                    <div class="itemBody"><div class="tick"><span>included</span></div></div>

                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody">
                    <strong>&pound;18<sup>.25</sup></strong>
                    </div>

                    <div class="itemFlag">
                    <a class = "btn btn-buy-online-now2" href="/breakdown/buy/58/?id=kwik-fit-insurance_roadside" target="_blank"></a>
                    <a href="/breakdown/more-info/913/?KeepThis=true&amp;TB_iframe=true&amp;height=600&amp;width=765&id=kwik-fit-insurance_roadside" class="thickbox"></a> 
                     </div>
                       </div></div>

Answer 1

Sadly not. IE 6-8 don’t include any sort of border-radius support. Your only solutions are to:

• Know exactly how tall and wide your div is, and use a transparent PNG background, which still won’t work on IE6. (not a great idea, makes your layout and sizing very inflexible)
• Pollute your markup horribly with images and nested divs trying to do this. (you don’t want to do this either)
• Use a JavaScript library like CurvyCorners: http://www.curvycorners.net