How can I round the corners of a link block in Webflow in a way that also rounds the corners of the image inside it?
TL;DR
- Apply the same border radius to both the Link Block and the Image inside using the Style panel.
- Set the Link Block’s overflow to hidden to ensure the image conforms to the rounded corners.
To round the corners of a link block in Webflow and ensure the image inside also appears rounded, you need to apply border radius correctly and manage image styling.
1. Apply Border Radius to the Link Block
- Select the Link Block element in the Webflow Designer.
- Under the Style panel, locate the Border section.
- Set a Border Radius value (e.g., 12px) to round the corners of the link block.
2. Ensure Image Adopts Parent’s Border Radius
- By default, images do not inherit border radius from parent elements.
- Select the Image element inside the Link Block.
- Under the Style panel, also set the same Border Radius value (e.g., 12px) as the link block.
3. Use Overflow Hidden (Optional but Recommended)
- To prevent the image from spilling outside the rounded link block:
- Select the Link Block, then in the Style panel, set Overflow: Hidden under the Layout section.
- This clips any image content that exceeds the link block's rounded corners.
4. Check for Image Display Settings
- Make sure the Image is not set to Display: Block with large intrinsic size that distorts the container.
- If needed, adjust the image’s Width to 100% and Height to Auto for responsive behavior.
Summary
To round both a Link Block and the image inside, apply the same border radius to both elements, then set the Link Block’s overflow to hidden to maintain the rounded shape visually.
