How to Add Opacity to CSS Variable Color?-CodePudding

I have created a CSS variable

--border-color: #b8b8c4;

Trying to add opacity to the border

border-color: 1px solid rgba(var(--border-color), 0.5);

I created a CSS variable and tried to add opacity to it as shown in one StackOverflow solution. But it is not working.

Some solution, please.

CodePudding user response：

Please try : opacify or transparentize css property

You can use 8-digit hexadecimal notation with opacity in the variable declaration.

Please let me know if you find any issues

CodePudding user response：

--border-color: 184, 184, 196;
border-color: 1px solid rgba(var(--border-color), 0.5);