Group block: border-radius attribute to achieve rounded edges only clips content on bottom but not on top

[porg]

Description

• Pull request which introduced the feature: Group Block: Add border radius #27665
• To fulfill Group Block: Allow setting border radius when background is set #26556
• ✅ Works fine on the bottom-left/right edges
• ❌ But not on the top-left/right edges

User Need

• Columns Block > allow border radius on columns #41345 and my personal application
• But as a workaround within that Column I created a Group block which wrapped all the contents, and which shall get the rounded edges.

Reproduction

1. Create a group
2. Nest some blocks into it, Paragraph block, Bullet List block, Image block
3. Give all of them a visible background-color
4. Give the group a border-radius of e.g. 16px on all 4 edges (top-left, top-right, bottom-right, bottom-left)

Expected: You get 4 rounded edges. Content of the nested blocks is clipped on all 4 edges.

Actual: Only the bottom-left and bottom-right edge get rounded and clip their content.

Attempted workarounds: Tried with various blocks (Paragraph, Bullet List, Image block, 3rd party Gutenslider block). Also tried themself alone, or wrapped within another group. Did not help. On the top the sharp edges always remained. Content was not clipped.

WordPress.Group.block.-.Border.Radius.attribute.to.achieve.rounded.edges.only.clips.content.on.bottom.but.not.on.top.mp4

Environment

• WordPress 6.2.2
• Gutenberg plugin 15.9.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[porg]

Workaround: CSS helper classes

.has-overflow-hidden { overflow: hidden;  }
.has-rounded-edges-30 { overflow: hidden; border-radius: var(--wp--preset--spacing--30); }
.has-rounded-edges-40 { overflow: hidden; border-radius: var(--wp--preset--spacing--30); }

• In the Block Editor select the Column block or Group block which needs rounded edges on all 4 sides.
• Inspector → Advanced → Additional CSS class(es) → Add the appropriate helper class(es).
  • Group: Give it .has-overflow-hidden and the border-radius you can set in the Block Editor UI
  • Column: Give it .has-overflow-hidden and a size helper class like .has-rounded-edges-30 to overcome Columns Block > allow border radius on columns #41345

[t-hamano]

@porg

Thanks for submitting the issue.

I think this problem would occur in all orientations, whether above or below. As seen in the CSS helper class you presented, the solution to this problem would be to apply overflow:hidden in the block to which the border-radius is applied. However, it would need to be thoroughly tested to ensure that it does not cut off something unintended.

I would mark this issue as an enhancement, not a bug.

[porg]

1. It is okay that you changed the type from bug to enhancement.

2. Thanks for the input what was the exact missing attribute. Updated my above comment to differentiate between the current state of Column (no border-radius UI controls at all, see Columns Block > allow border radius on columns #41345 ) and Group (just needs overflow:hidden so that the UI option border-radius gets really into effect).