BugWP logo BugWP
Back to Community
Home / Community / General

How to Fix Background Overlay Border Radius Issues in Otter Blocks

14 threads Sep 16, 2025

Content

Many users of the Otter Blocks plugin have encountered a specific visual issue where the Background Overlay feature does not respect the Border Radius settings applied to a section or column. This results in the overlay's square edges being visible outside the rounded corners of the container, which can break the intended design.

Why This Happens

Based on community reports and troubleshooting, this is a known limitation within the plugin. The Background Overlay is treated as a separate layer from the main container block. By default, the CSS that creates the rounded corners (border-radius) is not automatically applied to this overlay layer, causing the edges to protrude.

How to Fix It with Custom CSS

The most effective solution is to apply a small amount of custom CSS. This targets the specific overlay element and forces it to adopt the same border radius as its parent container.

  1. Identify the Block's Unique ID: First, you need to find the unique ID for your specific Advanced Columns or Section block. You can do this by viewing the page's source code in your browser (right-click and select 'View Page Source') and searching for wp-block-themeisle-blocks-advanced-columns. You will see an ID attached to it, which will be a string of characters like #wp-block-themeisle-blocks-advanced-columns-70444c01.
  2. Add Custom CSS: Navigate to your WordPress dashboard and go to Appearance → Customize → Additional CSS. In the CSS editor, paste the following code, making sure to replace 70444c01 with the unique ID from your block.
#wp-block-themeisle-blocks-advanced-columns-70444c01 > .wp-block-themeisle-blocks-advanced-columns-overlay {
    border-radius: 46px;
}

Adjust the 46px value to match the border radius you have set on your main block for a perfect match.

Looking Forward

This workaround is a reliable fix for the current version of the plugin. The Otter Blocks team has acknowledged this behavior and has noted it for a potential fix in a future update, which may make this manual CSS intervention unnecessary.

If this solution does not resolve your issue, it may be due to a conflict with your theme or other plugins. A standard troubleshooting step is to test with a default WordPress theme (like Twenty Twenty-Four) and all other plugins temporarily disabled to confirm the issue is with Otter Blocks itself.

Related Support Threads Support