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

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