How to Add Opacity to CSS Variable Color?

Question

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.

you're using hex color but putting it inside rgba...try setting the color in rgba format first — buzz, Nov 21 '22 at 07:33
Does this answer your question? [Can you set a border opacity in CSS?](https://stackoverflow.com/questions/4062001/can-you-set-a-border-opacity-in-css) — francisco, Nov 21 '22 at 08:50

score 2 · Answer 1 · answered Nov 21 '22 at 07:47

2

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

answered Nov 21 '22 at 07:47

Shreyansh Gupta

1 Answers1