**Overview:** When using CSS custom properties in a text-decoration shorthand, the decoration is not rendered as the browser seems to not know what to do with the provided variable or variables, rendering the whole declaration invalid. **Steps to Reproduce:** 1) Assign a color, style, or line type to a variable and use it in a shorthand `text-decoration` value. Live example on CodePen: https://codepen.io/chriskirknielsen/pen/NWYLXpr?editors=1100 Code to reproduce: ```html <p>Red dotted underline</p> ``` ```css p { --color: red; text-decoration: underline dotted var(--color); } ``` **Actual Results:** The text-decoration is not rendered. **Expected Results:** The text decoration should render below the text, dotted and in red. **Build Date & Hardware:** Using Safari Technology preview, Release 151 (Safari 16.0, WebKit 17615.1.1.2) Running macOS Monterey 12.4 on MacBook Pro (16-inch, 2019) **Additional Builds and Platforms:** DOES OCCUR on Safari Version 15.5 (17613.2.7.1.8) on macOS Doesn't occur on Chrome Version 104 on macOS Doesn't occur on Firefox Version 103 on macOS
This isn't really due to custom properties, it's simply that we have an incomplete implementation of the CSS text-decoration property. It only supports text-decoration-line values.
*** This bug has been marked as a duplicate of bug 230083 ***
(In reply to Tim Nguyen (:ntim) from comment #1) > This isn't really due to custom properties, it's simply that we have an > incomplete implementation of the CSS text-decoration property. It only > supports text-decoration-line values. Understood, thanks for clarifying! The first test works so I assumed it was all custom property related!