# Some feedback on new CSS border radius and padding

**URL:** https://meta.discourse.org/t/some-feedback-on-new-css-border-radius-and-padding/367544
**Category:** UX
**Created:** [May 25, 2025, 4:17pm UTC](https://meta.discourse.org/t/some-feedback-on-new-css-border-radius-and-padding/367544 "2025-05-25T16:17:48Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![j127](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j127/32/79093_2.png) [@j127](https://meta.discourse.org/u/j127)
#### Post date: [May 25, 2025, 4:17pm UTC](https://meta.discourse.org/t/some-feedback-on-new-css-border-radius-and-padding/367544/1 "2025-05-25T16:17:48Z")

</div>

I just updated Discourse to the latest version and there are some issues with new CSS border rounding, especially on sites with dark headers.

Here’s a screenshot from a dark header where the pieces don’t fit together cleanly any more:

![A rounded border against a flat line doesn't look good](https://global.discourse-cdn.com/meta/original/4X/e/1/b/e1b5809820d17ba099df4f2a48e39978c133f344.png)

Here it is on this forum with a red CSS border added to make it clearer:

![The same thing on this forum](https://global.discourse-cdn.com/meta/original/4X/5/b/5/5b56052b800d80d9a6dde040ff1592aef530b693.png)

Here’s what it looks like on a forum that wasn’t updated yet — I think this looks much better with less rounding and with the old padding (and no rounding where a corner touches a straight line).

 ![An image showing what it looked like before the update where borders aren't as rounded](https://global.discourse-cdn.com/meta/original/4X/b/9/2/b92372cfcdd8a002cc208bbd6c6b23f60bb7eb18.png)

I think the less rounded borders looked better overall. Here’s another example:

 ![border radius of touching elements](https://global.discourse-cdn.com/meta/original/4X/8/2/8/82865230bd72bd6a17af4bb7673ef3a3aa861fef.png)

Here’s the old version for comparison (looks better in my opinion, though the outer corners might look better with a 2px radius):

 ![touching elements without border radii](https://global.discourse-cdn.com/meta/original/4X/e/7/0/e7020eb92a42d8f11825c459f60f00e80cbd29f1.png)

Just some suggestions.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 26, 2025, 1:36am UTC](https://meta.discourse.org/t/some-feedback-on-new-css-border-radius-and-padding/367544/2 "2025-05-26T01:36:19Z")

</div>

Thanks for raising this, alerted the design team.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [May 30, 2025, 1:17pm UTC](https://meta.discourse.org/t/some-feedback-on-new-css-border-radius-and-padding/367544/4 "2025-05-30T13:17:40Z")

</div>

Some of this has been updated since your post.

We’ve added a bit of separation to the sidebar items:

 ![CleanShot 2025-05-30 at 08.15.33@2x](https://global.discourse-cdn.com/meta/original/4X/9/2/6/9262f3e21cbcce6b9a93db7cd734eb625dc8c6ee.png)

Our notification panel has had its padding removed. This is a direction our design team feels is better than having padding around all of the elements.

 ![CleanShot 2025-05-30 at 08.16.08@2x](https://global.discourse-cdn.com/meta/original/4X/d/9/d/d9d69959c3b326db7f6c2bb62a7f0d37900469ae.png)

This corner should not have rounding applied to it. Will address, thanks for reporting.

 ![CleanShot 2025-05-30 at 08.17.49@2x](https://global.discourse-cdn.com/meta/original/4X/2/8/f/28f0f968a2ed1491e81d8518d1ed5946804ce969.png)

---

<div class="post-metadata">

### Author: ![j127](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j127/32/79093_2.png) [@j127](https://meta.discourse.org/u/j127)
#### Post date: [May 30, 2025, 3:46pm UTC](https://meta.discourse.org/t/some-feedback-on-new-css-border-radius-and-padding/367544/5 "2025-05-30T15:46:16Z")

</div>

This is just some feedback, because it should be easy enough for me to change it on my own forums:

The lack of padding there is fine. It might just be me, but every time I click the menu, my brain says, “something doesn’t look right.” I think it’s more the border radius than the padding, because it looks like the box surrounding the user icon has a `4px` radius, but the menu has `2 * 4px` radius. The buttons in the sidebar are also 4px. I think it would look better if the borders of the menu are 4px so that it’s aligned with the rest of the page.

(Your screenshots looks like everything might be `8px`, but I think it looks too rounded. Unless I’m mistaken, when I log out I see `8px` radius but when I’m logged in I see `4px`. I’ve tried in a few browsers.)

* * *

**Edit:** we might be seeing different things. It isn’t a big problem, because I can override the variable, but it’s that top left corner that looks off to me whenever I click it on my sites. Maybe the bigger rounding puts the edge too close to the text, which is why I mentioned the padding in my previous comment.

 ![c](https://global.discourse-cdn.com/meta/original/4X/1/d/2/1d2d980f6751577c6b683f2938902ba50d8b9bde.png)
