Barra de progreso de estilo personalizado en CSS

Tengo una barra de progreso y quiero quitarle el estilo predeterminado.

Probé un poco de cosas pero no funcionó como esperaba.

Quiero cambiar el color de fondo y el radio del borde de la barra de progreso.

Cuando configuro el color de fondo, cambia del azul predeterminado al color verde y no al color que configuré.

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

Puedes ver el violín.

Cuando configuro el background-color el color cambia de azul a verde, que tiene que cambiar a un azul diferente.

Y quiero que la barra de progreso tenga un borde suave.

me puse border-radius pero esto tampoco funcionó.

.amount-progress {
  width: 80%;
  margin-left: -11.5%;
  height: 22px;
  background-color: #0091EA;
}

Tienes que trabajar con el kit de la barra de progreso de HTML5. Estos son actualmente los selectores completos para diseñar la barra de progreso de HTML5:

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

entonces :

progress {
  border-radius: 7px; 
  width: 80%;
  height: 22px;
  margin-left: -11.5%;
  box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
  background-color: yellow;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 7px;
  box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
}
progress::-moz-progress-bar {
  /* style rules */
}

<progress value="3333" max="10000">33%</progress>

Una cosa a tener en cuenta es que hay dos tipos de barras de progreso: indeterminado y determinado. Si usa lo anterior, cambiará el estilo para ambos. Si solo desea cambiar el estilo de una barra determinada, puede hacer lo siguiente. Esto es útil si desea cambiar el estilo de la barra de progreso indeterminada, por ejemplo, con una flecha giratoria redondeada o algo por el estilo.

progress {
    display: block;
}

    /* Determinate: */

    progress[value] {
      /* style rules */
    }
    progress[value]::-webkit-progress-bar {
      /* style rules */
    }
    progress[value]::-webkit-progress-value {
      /* style rules */
    }
    progress[value]::-moz-progress-bar {
      /* style rules */
    }

    /* Indeterminate: */

    progress:not([value]) {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-bar {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-value {
      /* style rules */
    }
    progress:not([value])::-moz-progress-bar {
      /* style rules */
    }

<p>Determinate:</p>

<progress value="66" max="100">Determinate</progress>

<p>Indeterminate:</p>

<progress>Indeterminate</progress>