Estou tendo dificuldades em configurar a aparência de um progress bar com css e html
Sou iniciante, estou fazendo meu site agora e me deparei com o seguinte problema: não consigo fazer minha progress bar aparecer direitinho no chrome e firefox. No Microsoft Edge ela aparece da forma que eu quis configurar, mas ao acessar meu index.html no chrome e firefox a progress bar fica diferente. Alguém pode me ajudar?
HTML:
<div class="section" align="center">
<h2><i>Minhas habilidades</i></h2>
<hr width="200px">
<h6>Ao clicar, você será direciado ao Wikipedia, onde fala mais sobre cada uma das minhas habilidades</h6>
</div>
<ul class="abilities">
<!--consegui corrigir com o margin-left-->
<li>HTML:<br> <progress min= "0" max="100" value="100"></progress></li>
<li>CSS:<br> <progress min= "0" max="100" value="10"></progress></li>
<li>JavaScript:<br> <progress min= "0" max="100" value="60"></progress></li>
</ul>`
CSS:
.abilities{
max-width: 100%;
font-style: italic;
margin-left: 35%;
}
.abilities progress {
border-radius: 10px;
padding: 2px;
color: rgb(247, 111, 111);
background-color: white;
}
Algumas prints do problema:
Primeira imagem: Microsoft Edge, como eu queria que fosse exibida a progress bar Segunda imagem: Chrome Terceira imagem: Firefox