Border style CSS variables incorrectly compiled as border-color

[coderrshyam]

What version of Tailwind CSS are you using?

For example: v4.0.17

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15.2.5

What version of Node.js are you using?

22.14.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction

1. Define a CSS variable: --ripple-border-style: dashed;
2. Use it in a class: border-(--ripple-border-style)

Expected behavior:
The compiled CSS should be: border-style: var(--ripple-border-style);

Actual behavior:
The compiled CSS is: border-color: var(--ripple-border-style);

Describe your issue

This makes it difficult to dynamically change border styles using CSS variables. The workaround is to use static border styles like border-dashed, but this doesn't allow for dynamic style changes via CSS variables.

[philipp-spiess]

Hey! Yeah we don't have support for setting border styles via the border-* utility, as all of the border-styles are considered static utilities. You can use arbitrary properties for this, though:

[border-style:var(--ripple-border-style)]