progress[value] {
/ Reset the default appearance /
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

/ Get rid of default border in Firefox. /
border: none;

/ Dimensions /
width: 100px;
height: 22px;
/ For IE10 /
color: yellow;
}
progress::-webkit-progress-bar {
background-color: orange;
border: 0;
margin-top:5px;
height: 55%;
border-radius: 9px;
}
progress::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg, transparent 20%, rgba(0, 0, 0, .1) 20%, rgba(0,0, 0, .1) 20%, transparent 20%),
-webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, brown 0%,orange 50%,green 100%); / Chrome10-25,Safari5.1-6 /
border-width: 1px;
border-style: solid;
border-color: gray;
margin-top:5px;
height: 100%;
border-radius: 9px;
}
progress::-moz-progress-bar {
background-image:
-moz-linear-gradient(135deg, transparent 20%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.1) 20%, transparent 20% ),
-webkit-linear-gradient(left, brown 0%,orange 50%,green 100%); 
-moz-linear-gradient(left, #ff3232 0%, #ffff28 50%, #27b700 100%);
border-width: 1px;
border-style: solid;
border-color: gray;
margin-top:5px;
height: 55%;
border-radius: 9px;

}
progress {
background-image:url(/backgrounds/progressbar2.png);
text-align: center;
border: 0;
height: 22px;
width: 100px;
border-radius: 9px;
-webkit-appearance: none;
-moz-appearance:none;
}
progress[value]::-webkit-progress-bar {
background-color: #96b8f1;
border-radius: 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
border-radius: 25px;
}