Как изменить граничный радиус значения шага выполнения?

Question

У меня возникли проблемы с изменением граничного радиуса значения элемента HTML5 <progress>. Я пытаюсь применить радиус границы к самому элементу прогресса и к progress[value], но это, кажется, ничего не делает.

Так что я хочу значение прогресс бар, чтобы выглядеть примерно так:

Вместо этого:

Вот то, что я до сих пор: https://jsfiddle.net/8m93Lorn/1/

Любые идеи?

Answer 1

Для этого вам нужно сделать это так:

Похоже, они являются дубликатами, но это на самом деле убеждается, что он работает во всех браузерах

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

Надежда это помогает!

Answer 2

использовать этот код в моем хром работает

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/