Issue with radius on blog post images

Quick fact-based take on this:

(see the workaraound with css or the no-code variant below)

My first tests went as follows — I checked the modules from the JSON files both at the code level and in actual use on a page. From that I conclude:

The rounding isn't actually set by Mak's k-blog preset — if you look inside it, k-blog contains no image radius at all. The rounded corners come from a separate radius variable that gets applied to the image.

And here's the key part: that exact same radius variable works perfectly on a normal page (e.g. on a regular Image module) — the corners round on the live site there. I tested this. So both pieces are demonstrably working: the preset is fine, and the variable is fine.

The radius only fails to show up on the live page inside the blog module, while it's still visible in the Visual Builder and Theme Builder. So this isn't a fault in KrafterPRO's blog module or in the variable setup — it's specifically how Divi outputs that variable-based radius for blog-module images on the front end. The same value, applied the same way, works everywhere except inside the blog module.

Easy to confirm in a minute: drop a normal Image module on the same page with the same radius — it'll round on the live site, but the blog images won't. That isolates it cleanly to the blog module.

--

I'm continuing to work on tracking down the root cause.

In the meantime, this is solvable right away with a bit of CSS

Since you are using a Theme Builder layout, a quick CSS snippet inside your global template is the cleanest and most bulletproof way to fix this in seconds:

Step 1: Add a Class to the Blog Module

1. Go to Divi → Theme Builder and edit the Body layout of your "All Blog Posts" (or Blog Archive) template. (Important: Do not edit individual post pages, it must be done inside the template!)
2. Open your Blog Module settings.
3. Switch to the Advanced tab and open Attributes (this is where the old "CSS ID & Classes" fields live in Divi 5).
4. Click + Add Attribute → Target Element: Module → Attribute Name: class → Value: blog-radius-fix.

Step 2: Paste the CSS "Cookie Cutter"

1. Open the Page Settings (the gear icon located in the top-left corner of the Divi 5 builder UI).
2. Go to the Advanced tab → Custom CSS and paste this code:

css

/* Forces the inner image wrappers of Divi 5.6 to clip the corners */
.blog-radius-fix .et_pb_image_container, 
.blog-radius-fix .et_pb_image_container a,
.blog-radius-fix img {
  border-radius: var(--gvid-xxxxxx) !important; /* 💡 Replace with your actual radius variable or e.g. 12px */
  overflow: hidden !important;
}

Verwende Code mit Vorsicht.

Why this works:

Instead of trying to hide the overflow on the whole module (which could ruin your grid layout or cut off box shadows), this snippet targets the exact HTML wrappers holding the image. The overflow: hidden !important acts like a cookie cutter, forcing the live browser to instantly slice off those stubborn sharp corners!

--

The Native Alternative: Using Global Variables on Sub-Elements (No CSS Needed)

Instead of hardcoding pixel values (like 12px) into every module or wrestling with custom CSS, the most professional way to handle this in Divi 5.6 is to map your Global Design Variables directly to the specific image element.

Applying the radius to the main Blog module forces the whole grid container to round its corners, which breaks the frontend layout. Assigning the global variable directly to the Featured Image sub-panel forces Divi 5.6 to automatically apply the correct wrapper rules on the live site.

Here is how to do it:

Step 1: Map the Global Variable to the Image Panel

1. Go to Divi → Theme Builder and edit the Body layout of your "All Blog Posts" template.
2. Open your Blog Module settings.
3. Switch to the Design tab and open the Image dropdown section (Important: Do not use the main Border section at the bottom of the module!).
4. Look for the Corner Radius option and click the small Dynamic/Variable icon (the circle/globe icon next to the input field).
5. Select your existing KrafterPRO global radius variable (e.g., --gvid-border-radius or your custom design tokens) from the list.

Step 2: Save as a New Module Preset (Optional but Recommended)

If you want to reuse this perfect setup across different pages without doing the steps again:

1. Look at the very top of your Blog module settings panel where it shows the current preset name.
2. Click the preset dropdown and select "Create New Preset from Current Styles".
3. Name it something clear, like k-blog-rounded-images.
4. Save it. Now you can apply this exact layout behavior to any Blog module on your site with a single click.

Why this is the best approach for Divi 5.6:

• Centralized Design Control: If you want to change your site-wide corner radius from 12px to 8px next month, you only change it once in your Divi 5 Theme Settings → Design Variables. Every blog image on your site will instantly update.
• No Layout Breaking: Divi 5.6 natively understands that the radius belongs to the image container wrapper, keeping your outer grid structures, text alignments, and beautiful box shadows perfectly intact.

I will try that and see if there are other solutions when using KrafterPRO presets.

How to Fix Missing Post Image Radius in Divi 5.6 (KrafterPRO Presets)

If your blog post images show beautiful rounded corners inside the Divi 5.6 Visual Builder but turn back into sharp, ugly squares on the live website, you are not alone. This layout glitch frequently impacts users utilizing advanced frameworks like the KrafterPRO presets.

Here is the exact breakdown of why this happens, how to fix it immediately, and how the issue can be solved permanently on the framework level.

Why is this unique to the Blog Module? (And why normal pages work fine)

You might wonder: "Why can I add rounded corners to a standard Image Module on a normal page without any issues, but the Blog Module completely breaks on the live site?"

The answer lies in how Divi 5.6 generates its modern HTML structure and CSS grids behind the scenes:

• Dynamic Loops vs. Static Elements: On a normal page, an Image Module is a static element. When you set a corner radius, Divi 5.6 applies the CSS directly to that specific HTML <img> tag or its single outer wrapper.
• The Deeper Layer Conflict: The Blog Module uses a dynamic loop. To keep the post grid stable, Divi 5.6 wraps each post and its featured image inside multiple layers of hidden containers (like .et_pb_image_container or an anchor <a> tag for the post link).
• The Overflow Bleed: When you apply a corner radius to the main Blog Module settings, Divi 5.6 rounds the outermost box of the post. However, theme presets (like KrafterPRO) require inner containers to have overflow: visible so that post badges or categories can float outside the image frame. This allows the sharp 90-degree corners of the actual image to bleed right through on the live front-end.
• Visual Builder Illusion: It looks perfect inside the editor because the Visual Builder injects auxiliary helper styles to make elements selectable. These helper styles disappear on the live site, causing the layout to break.

Solution 1: The Bulletproof Custom CSS Fix

Since you are using a Theme Builder layout, adding a tiny, highly targeted CSS snippet inside your global template is the cleanest way to force the live page to behave.

Step 1: Add a Class to the Blog Module

1. Go to Divi → Theme Builder and edit the Body layout of your "All Blog Posts" (or Blog Archive) template. (Note: Do not edit individual post pages; it must be done inside the global template!)
2. Open your Blog Module settings.
3. Switch to the Advanced tab and open the Attributes section (this is where the old "CSS ID & Classes" fields live in Divi 5).
4. Click + Add Attribute → Target Element: Module → Attribute Name: class → Value: blog-radius-fix.

Step 2: Paste the CSS "Cookie Cutter"

1. Open the Page Settings (the gear icon located in the top-left corner of the Divi 5 builder UI).
2. Go to the Advanced tab → Custom CSS and paste this code:

css

/* Forces the inner image wrappers of Divi 5.6 to clip the corners */
.blog-radius-fix .et_pb_image_container, 
.blog-radius-fix .et_pb_image_container a,
.blog-radius-fix img {
  border-radius: var(--gvid-xxxxxx) !important; /* 💡 Replace with your actual radius variable or e.g. 12px */
  overflow: hidden !important;
}

Backup before and use code with caution.

Solution 2: The Native Alternative (No CSS Needed)

Instead of wrestling with custom CSS, the most modern way to handle this natively in Divi 5.6 is to map your Global Design Variables directly to the specific image sub-element.

Step 1: Map the Global Variable to the Image Panel

1. Open your Blog Module settings inside your Theme Builder template.
2. Switch to the Design tab and open the Image dropdown section (Important: Do not use the main Border section at the bottom of the module!).
3. Look for the Corner Radius option and click the small Dynamic/Variable icon (the circle/globe icon next to the input field).
4. Select your existing KrafterPRO global radius variable (e.g., --gvid-radius-base or your custom design tokens) from the list.

Step 2: Save as a New Module Preset (Optional)

If you want to reuse this perfect setup across different pages with a single click:

1. Look at the very top of your Blog module settings panel and click the preset dropdown.
2. Select "Create New Preset from Current Styles".
3. Name it something clear, like k-blog-rounded-images, and save it.

How this can be solved permanently inside KrafterPRO

Since KrafterPRO is a utility-first design system built on top of Divi 5, the absolute cleanest way to fix this is by updating the master framework presets and CSS tokens. To resolve this issue permanently for all users, two specific adjustments can be made inside KrafterPRO's core structure:

1. Update the k-blog Element Preset

KrafterPRO can update its global Blog Module Preset inside the Divi 5 Preset Manager. The corner radius variable must be removed from the main Border tab and mapped directly to the Design → Image sub-panel instead. This natively forces Divi 5.6 to apply the radius directly to the inner image wrapper out of the box.

1. Patch the Utility CSS for Grid Containers

To prevent the layout bleed without breaking outer badges or drop shadows, this highly specific rule can be added to Krafter’s global stylesheet:

css

/* Global KrafterPRO framework fix for Divi 5.6 post images */
.et_pb_blog_05_wrapper .et_pb_image_container,
.et_pb_blog_05_wrapper .et_pb_image_container a {
  overflow: hidden !important;
  border-radius: inherit;
}

Backup before and use code with caution.

Once these framework adjustments are pushed, the issue is completely eliminated. Users can simply drop the blog module onto any page, apply the k-blog preset, and enjoy perfectly rounded post images on both the builder and the live frontend without ever touching a line of code!

"Nothing is perfect, and nothing lasts forever. Mistakes happen—even when using AI."

(Frank Schlatter)

I have this problem on normal pages...

Image Modul, Design tab Border "Radius Large" -> rounded corners in the builder but not at the front end. I hope, KrafterPro 3.0 will fix this. I have a CSS fix for this from ChatGPT.

Frank,

I am trying to implement the fix as you suggested but I do not see Attributes in the settings of the body of the blog module template. Am I working in the wrong location?