[wp-trac] [WordPress Trac] #65321: Global --wp--style--border--color Variable Applies Unwanted border-style: solid to Cover Block Background Span

[WordPress Trac]

#65321: Global --wp--style--border--color Variable Applies Unwanted border-style:
solid to Cover Block Background Span
-------------------------------------------+------------------------------
 Reporter:  vijaysinh9094                  |       Owner:  (none)
     Type:  defect (bug)                   |      Status:  new
 Priority:  normal                         |   Milestone:  Awaiting Review
Component:  General                        |     Version:  7.0
 Severity:  major                          |  Resolution:
 Keywords:  needs-patch reporter-feedback  |     Focuses:  ui, css
-------------------------------------------+------------------------------

Comment (by deeppatel8950):

 @vijaysinh9094 I agree with your observation. When we use the inline CSS
 variable `--border-color: red;`, the default theme CSS in Twenty Twenty-
 Five automatically applies `border-style: solid;`. Because of this, the
 border gets rendered even though we are only passing the border color
 variable.

 As shown in the screenshots, the border becomes visible because the theme
 adds the following default CSS rule:

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

 Due to this rule, the border is rendered using the provided `--border-
 color` variable value, even when no explicit border width or border style
 is added by the user.

 @kunalpareek @hbhalodia @jorbin Please follow the steps below to reproduce
 the issue in the Twenty Twenty-Five theme:

 1. Activate the Twenty Twenty-Five theme.
 2. Add a Cover block.
 3. Apply the following inline style:

    html
    style="--border-color: #f44336;"

 4. Inspect the element using DevTools.
 5. Notice that the theme automatically applies:

    css
    border-style: solid;

 6. Because of this default style, the border is rendered even though only
 the `--border-color` variable is passed.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65321#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform