HTML progress bar with border-radius and background gradient

Question

I need to make a progress bar just like this:

http://kashqool.com/files/progress-bar.png

It must work in (IE6+, Chrome 3+, Firefox 5+, Opera 9+). So for border-radius in IE i added ie-css3.htc but the problem - in IE when i added border-radius and background with linear gradient the bordoer radius will not be shown. - Is it possible that when DIV width is 43% will the black side will not shown. And when will be 100% it will be shown. Just like picture.

this is the code:

<!DOCTYPE HTML>
<html>

<head><title>Level 1</title>

<style type="text/css">

html,

body{
margin:0;
paddding:0; 

}

h3{
padding:0;
`margin`:0;
}

.progress_bar1{
behavior:url(ie-css3.htc);
background-color:white;
position:relative;
width:700px;
height:30px;
border:1px solid black; 
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
float:left;
padding:4px;

}

.first_bar{
behavior:url(ie-css3.htc);
background-color:white;
width:100%;
height:28px;
float:left; 
z-index:1;f

}

.div_100{
background-color:red;
width:100%;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#FF8A2BE2, endColorstr=#FF000000);
background-image: -webkit-gradient(
    linear,
    left top, right top,
    from(blueviolet),
    to(black)
);
background-image: -webkit-linear-gradient(
    left,
    blueviolet,
    black
);
background-image: -moz-linear-gradient(
    left,
    blueviolet,
    black
);
background-image: -o-linear-gradient(
    left,
    blueviolet,
    black
);
background-image: linear-gradient(
    left,
    blueviolet,
    black
);

border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
height:28px;
float:left;     
}

</style>

</head>

<body>
<h3> Level 1 </h3>
<div class="progress_bar1">
    <div class="first_bar">     
        <div class="div_100"></div>     
    </div>
</div>

</body>

</html>

You might want to give CSS3Pie a try. I've had really good luck with it, even in ancient IE6. — ajm

chipcullen chipcullen · Accepted Answer · 2012-07-03T13:23:37

I'm only guessing here, but I would think combining a background gradient and rounded corner hack would probably result in some odd behavior.

I would just simply omit rounded corners for IE6-8. It's called 'progressive enhancement'. Better browsers get better experiences. The progress bar will still 'work' for IE6-8, they just will have square corners instead of rounded ones. The point of the object - the amount of progress being made - will still work for users. Your users won't go from IE6 to Chrome and compare the progress bar. Just let it go.

See: http://dowebsitesneedtolookexactlythesameineverybrowser.com/

HTML progress bar with border-radius and background gradient

2 Answers