I have a progress bar with rounded corners. When progress is 100% it overlaps the rounded corner of the background white color making it square. In Firefox it works correctly but not in the rest of the modern browsers (Chrome, Edge).
body {
background: #ccc;
}
#feedProgress {
width: 200px;
height: 30px;
border: none;
background: #fff;
appearance: none;
border-radius: 0.5rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-bar {
background: #fff;
border-radius: 0.5rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-value {
background: #006DC5;
border-radius: 0.5rem;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}<progress id="feedProgress" value="50" max="100"></progress><br><br>
<progress id="feedProgress" value="100" max="100"></progress>>Solution :
Adding overflow: hidden on the progress element should do the trick
body {
background: #ccc;
}
#feedProgress {
width: 200px;
height: 30px;
border: none;
background: #fff;
appearance: none;
border-radius: 0.5rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
overflow: hidden;
}
#feedProgress::-webkit-progress-bar {
background: #fff;
border-radius: 0.5rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#feedProgress::-webkit-progress-value {
background: #006DC5;
border-radius: 0.5rem;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}<progress id="feedProgress" value="50" max="100"></progress><br><br>
<progress id="feedProgress" value="100" max="100"></progress>