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 nested image.
- Ensure the image is set to 100% width and height with Object Fit: Cover, and optionally set Overflow: Hidden on the Link Block to maintain rounded corners.
To round the corners of a Link Block and its nested image simultaneously in Webflow, you need to apply the same border radius to both elements. Here’s how to do it:
1. Select the Link Block
- Click on the Link Block in the Webflow Designer.
- In the Style Panel, scroll to the Borders section.
- Set the Border Radius (e.g., 12px) to the desired value.
2. Style the Image Inside
- Click on the Image inside the Link Block.
- In the Style Panel, also set the same Border Radius as the Link Block (e.g., 12px).
- This ensures the image corners align with the Link Block's rounded edges.
3. Ensure Image Covers Entire Link Block
- Set the image to 100% width and height if it’s intended to cover the entire Link Block.
- Under Layout or Sizing, make sure:
- Width: 100%
- Height: 100%
- Object Fit: set to Cover (if necessary) to prevent stretching.
- If the image isn’t filling the block properly, also check the positioning and padding/margin on the Link Block.
4. Optional: Overflow Hidden (If Needed)
- Set Overflow: Hidden on the Link Block if you want to prevent any child elements (like the image) from spilling outside its rounded corners.
Summary
To round the Link Block and image together, apply the same border radius to both the Link Block and the image. Make sure the image fills the Link Block fully and optionally use Overflow: Hidden to clip any overflow.