In a UX-focused discussion titled ‘Some feedback on new CSS border radius and padding,’ j127 reports visual inconsistencies after a Discourse update, particularly with border rounding on dark headers and misaligned corner radii in menus and sidebars. Screenshots illustrate how rounded borders now clash with straight edges, making interfaces appear less cohesive compared to the previous version with flatter, more consistent corners j127. sam acknowledges the feedback and alerts the design team. jordan.vidrine responds that some fixes are already in place — including added separation in sidebar items and removed padding in the notification panel — and confirms the top-left corner’s unintended rounding will be corrected. j127 clarifies that while padding removal is acceptable, the perceived visual mismatch stems from inconsistent border-radius values (e.g., 4px vs 8px) between menu elements and surrounding UI components, especially noticeable when logged in. They note the issue is minor and overrideable via CSS but impacts perceived polish. The thread reflects collaborative UX refinement, with user-reported visual friction prompting immediate design team action and iterative improvements.
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:
Here it is on this forum with a red CSS border added to make it clearer:
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).
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.
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.
