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.
Conclusion
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.
