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)]

[coderrshyam]

But using [border-style:var(--ripple-border-style)], in browser it tells --border-style is not defined even if i had alreay set it in style "--border-style": borderStyle,

[wongjn]

You'd want to use "--ripple-border-style": borderStyle, presumably, not "--border-style": borderStyle,: https://play.tailwindcss.com/bTi3pw38mW

[coderrshyam]

You'd want to use "--ripple-border-style": borderStyle, presumably, not "--border-style": borderStyle,: https://play.tailwindcss.com/bTi3pw38mW

Does not work for "--ripple-border-style": borderStyle and also "--border-style": borderStyle

[wongjn]

Consider providing a git repo that reproduces the unexpected behavior so we can take a deeper look.