How To Change Border-radius Of Progress Bar Value?

I'm having trouble changing the border-radius of the value of an HTML5 element. I try applying a border radius to the progress element itself and to progress[value

Solution 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!

Solution 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/