Is there a way to style a progress bar using CSS to make it look like the image below? View expected design
I have already attempted to achieve this but ended up with a different result. See what I have done so far
progress {
border: 1.5px solid silver;
border-radius: 0px;
width: 170px;
height: 18px;
}
progress::-webkit-progress-bar {
background-color: whitesmoke;
border-radius: 0px;
}
progress::-webkit-progress-value {
background-color: cornflowerblue;
border-radius: 0px;
}
<section class="prog">
<p>Progress of today's class <progress value="2" max="5"></progress></p>
</section>