Remove rounded for the progress bar?

Ask us anything How do I?
1

image
image3260×380 34.6 KB

image

I want the top left and top right of the entire progress bar to be rounded, but NOT the green bar (you can see it is also rounded which I don’t want)

How to fix?

1 Like
3

Great question! One solution might be changing the radius of the progress bar element.
Here is a quick video.

Please let me know if this is helpful :smiley:

4

Hi Doc, yes that’s what I did (change the radius of the progress bar", but the green part ended up being rounded as well rather than just the corners.

5

Since your progress bar is at the top, couldn’t you just set the border-radius to 0 (to remove the roundness on both elements) and set the container to overflow: hidden? That way, the rounded corners are handle by the container.

If it’s not possible, you could wrap your progress bar inside another div that would handle the border-radius :slight_smile: