Posted in: Bricks Builder Tutorials

Posted on:

How to Fix Image Radius Issues with Overflow Property

Are you struggling with stubborn square edges on your images despite setting a radius? You're not alone! Many web designers face this issue when using tools like Bricks to create rounded corners on images.

The good news is that there’s a simple solution to this common problem, and in this tutorial, I’ll walk you through the steps to achieve perfectly rounded corners on your images.

Step 1: Select Your Image

The first step is to select the image you want to modify. Select the image element to ensure it’s the active element you’re working on.

Step 2: Set the Radius

With the image selected, navigate to the border-radius settings or apply a radius class (if you’re using a CSS framework like Core Framework). This is often labelled as “radius” or “border-radius” in your design tool. Here, you can set the desired radius for your image. For example, you might choose to set it to “radius M” for a moderate curve.

Initially, you might notice that Bricks shows a preview with rounded corners (often indicated by blue edges), but the image still appears with square edges. This mismatch can be frustrating, but don’t worry, the fix is just around the corner.

Step 3: Adjust the Overflow Property

The key to solving this issue lies in the overflow property of your image’s container. To access this:

  • Deselect any specific class you might be using for the image.
  • Open up the layout options for your image.
  • Scroll through the layout settings until you find the “overflow” property.

By default, this property is often set to “visible,” meaning that any content exceeding the container’s boundaries will still be shown, hence the square edges of your image peeking out.

Step 4: Set Overflow to Hidden

Change the overflow property from “visible” to “hidden.” This tells the browser to hide any image parts extending beyond the container’s rounded corners.

Step 5: Save Your Changes

After adjusting the overflow property, hit the save button to apply the changes. You should now see that your image perfectly aligns with the rounded corners, giving it a smooth and professional look.


And there you have it—a quick and easy fix to a common web design annoyance. By simply adjusting the overflow property of your image’s container, you can ensure that your rounded corners display correctly without any parts of the image sticking out.

Remember, the little details often make a big difference in design. Now that you know this trick, you can apply it to any image that needs a touch of elegance with rounded corners.

You may also like these posts.

Join The Community

Join over 14,000 WordPress enthusiasts and become part of a vibrant community.