If you recently updated WordPress and suddenly noticed harsh, random black borders popping up around your columns, container edges, or Toggle (Accordion) modules in Avada, you are definitely not alone. This visual bug has been disrupting layouts on countless legacy websites built with premium builders.

The trickiest part about this bug is that it doesn’t stem from your Avada element settings. You can check your toggle styling configurations, column borders, and background options a dozen times, and everything will say “None” or “0px”—yet that stubborn black frame remains on the live site.

In this quick tutorial, we’ll dive into exactly why this is happening and show you a single snippet of global CSS that neutralizes the bug across your entire site instantly.

The Culprit: WordPress Global Block Styles

After diving deep into the browser inspector tool to trace the structural layout, the exact line of code breaking your container layouts can be uncovered. The culprit code is a default layout style embedded directly inside the native WordPress core block library:

html :where([style*=border-color]) {
    border-style: solid;
}

This snippet was introduced by the WordPress core team to ensure that modern Gutenberg block components render properly when a user applies custom inline colors. However, because it uses the modern structural CSS pseudo-selector :where(), it has a massive, sweeping target radius.

Why This Breaks Avada Elements

Avada dynamically calculates structural layouts behind the scenes. When you choose specific container features, Avada often outputs an inline color definition while dynamically assigning a border width of 0 or leaving the style blank to keep it invisible.

Unfortunately, the blanket WordPress rule intercepts this structure. It looks at the document and declares: “If any HTML element contains an inline style with a border-color attribute, I am going to force its border-style to solid!”

Because no explicit override is provided by default for older toggle wrappers or flex layouts, the browser defaults to a standard fallback width and color—resulting in that ugly, generic black frame wrapped around your neat FAQ accordions and column wrappers.

The Quick & Permanent Fix

Instead of manually targeting every single container, individual column, or specific toggle module one by one, you can neutralize this blanket structural rule globally. By reversing the logic via a custom snippet, you safely restore the layout back to its clean design language.

Add the following custom CSS block to override the core conflict:

/********** Global WordPress Core Border Override *******************/
html :where([style*=border-color]) {
    border-style: none !important;
}

💡 Pro-Tip: Stripping that forced solid rule completely returns layout control to your theme’s native engine. If you ever explicitly want a border back on an element, your individual element settings will still work seamlessly.

How to Apply the Fix to Your Avada Website

To safely apply this fix to your website without breaking core theme files, follow these quick steps:

1. Log in to your WordPress Dashboard.

2. On the left-hand sidebar menu, navigate to Avada > Options.

3. Scroll down or search to locate the Custom CSS panel tab.

4. Paste the snippet above directly at the very bottom of your code input box.

5. Click Save Changes.

After saving, make sure to completely purge your website optimization plugin cache (such as LiteSpeed Cache, SG Optimizer, or W3 Total Cache) as well as your local browser cache. Refresh your page, and your FAQs, grid items, and columns will instantly render clean, boxy, and perfectly borderless just like they used to!