How to change border-radius of progress bar value?

Question

I'm having trouble changing the border-radius of the value of an HTML5 <progress> element. I try applying a border radius to the progress element itself and to progress[value], but that doesn't seem to do anything.

So I want the progress bar value to look something like this:

Instead of this:

Here is what I have so far: https://jsfiddle.net/8m93Lorn/1/

Any ideas?

Answer 1

To do so you need to do it like so:

It seems like these are duplicates, but this actually makes sure that it works across all browsers

progress {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-webkit-progress-bar {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-webkit-progress-value {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-moz-progress-bar {
    border: 0;
    height: 40px;
    border-radius: 20px;
}

Fiddle

Hope this helps!

Answer 2

use this code , in my chrome works

progress[value]::-webkit-progress-bar {
  background-color: #ededed;
  border-radius: 40px;
}

progress[value]::-webkit-progress-value {
  border-radius: 40px;
  background-color:lightblue;
}

https://jsfiddle.net/8m93Lorn/2/