The common.css file [style*=border-width] selector is applying unwanted styles

[firdaus666]

Description

Description:

In the file common.css from the Gutenberg plugin, there's a global selector:

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

This selector unintentionally matches inline styles containing custom CSS variables such as:

<div style="--fir-list-border-width: 1px;"></div>

…which results in the element receiving border-style: solid, even though no actual border-width property is defined. This causes unwanted borders to appear in custom blocks and themes using custom CSS variables.

Step-by-step reproduction instructions

1. Add a block with inline custom property like:
   <div style="--my-custom-border-width: 1px;"></div>
2. Observe that border-style: solid is applied to the element.

Expected Behavior:

The selector should only apply border-style: solid if a real border-width is declared, not when custom variables containing the substring border-width are used.

Suggested Fix:

Avoid using broad attribute selectors like [style*=border-width]. Instead:

• Use class-based targeting if possible.
• Or use stricter matching logic (e.g., regex-like match for actual property names).

Workaround:

Add border width 0 to border wrapper options, …but this should not be necessary, as the default border should be none, if the border option is not set.

Screenshots, screen recording, code snippet

Environment info

• WordPress version 6.8.1
• Gutenberg Version 20.8.0

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Rishit30G]

Thanks for sharing the issue,
I was able to reproduce it locally. We could consider using a regex like /\bborder-width\s*:/ to more accurately match declarations such as border-width: 1px.
However, I’m curious about the other border-related styles defined in common.scss, introducing separate logic specifically for border-width might lead to inconsistency with how other border properties are handled.

[t-hamano]

We could consider using a regex like /\bborder-width\s*:/ to more accurately match declarations such as border-width: 1px.

I think the CSS selector only allows limited pattern matching, and we can't use regular expressions.

Admittedly, the current implementation is a bug, but for now, our only solution might be to use non-pattern-specific variable names or to override the unintended style.

[Rishit30G]

I think the CSS selector only allows limited pattern matching, and we can't use regular expressions.

Agreed, my intension for this was using JavaScript, as for the CSS pattern matching we are limited to ^ ( starts with ), $ ( ends with ) and * ( contains )

[firdaus666]

Thanks everyone for responding to this.

The solution is indeed simple, just change --my-custom-border-width to --my-custom-borders-width.

I realize this is probably a minor bug, but it can be confusing just because CSS variables can trigger unwanted visual side effects.

Maybe in the future this can be considered for a fix, or at least documentation or exceptions.

[t-hamano]

The fundamental solution to this problem would be to rework the global styles logic and not use potentially conflicting selectors, or wait until CSS supports regular expressions.

For now, I'll leave this issue open.

[firdaus666]

Thank you for opening this issue.

[mateuswetah]

Just passing here to tell that I'm facing issues related to this.

I use a block from a plugin. That block has in it's wrapper the following CSS: --tainacan-input-border-color: var(--tainacan-gray1);. When I insert that block in any page having the Gutenberg plugin activated, a border is added to the entire wrapper (when the variable itself is about an element inside the block - the input).

I don't think changing the input variable in the plugin code is something ok to ask, they already had the care to add namespacing to it. Its the rule:

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

from common.css that is too generic.

But I understand that it seems that there's no easy solution by now. Hope you guys can figure something one day!

[mateuswetah]

It seems that the bug makes its way into Core :(

Seeing the issue on WP 7.0 RC

[firdaus666]

@mateuswetah Yes the current solution is to change the code so that it is not the same as the core.