# Remove rounded for the progress bar?

**URL:** <https://community.weweb.io/t/remove-rounded-for-the-progress-bar/8544>\
**Category:** How do I?\
**Created:** [May 10, 2024, 6:41am UTC](https://community.weweb.io/t/remove-rounded-for-the-progress-bar/8544 "2024-05-10T06:41:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [May 10, 2024, 6:41am UTC](https://community.weweb.io/t/remove-rounded-for-the-progress-bar/8544/1 "2024-05-10T06:41:32Z")

</div>

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fcbf39dfcf30ce5e42b78f4fa0e605a5d21d56e6.png)

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9fe0bffc759364a4958b45fda797354b0cfb9a2b.png)

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?

---

<div class="post-metadata">

**Author:** ![Doc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/doc/32/8594_2.png) [@Doc](https://community.weweb.io/u/Doc)\
**Post date:** [May 13, 2024, 5:22am UTC](https://community.weweb.io/t/remove-rounded-for-the-progress-bar/8544/3 "2024-05-13T05:22:23Z")

</div>

Great question! One solution might be changing the radius of the progress bar element.  
[Here is a quick video](https://share.zight.com/nOu7Nwd2).

Please let me know if this is helpful 😃

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [May 15, 2024, 7:08am UTC](https://community.weweb.io/t/remove-rounded-for-the-progress-bar/8544/4 "2024-05-15T07:08:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [May 15, 2024, 8:02am UTC](https://community.weweb.io/t/remove-rounded-for-the-progress-bar/8544/5 "2024-05-15T08:02:33Z")

</div>

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 🙂