Adding a linear-gradient to a border via :root var in CSS? [duplicate]

Question

How can I add a linear-gradient to a root var in my CSS?

 :root {
--primary: linear-gradient(90deg, rgba(24,238,255,1) 0%, rgba(48,223,255,1) 100%);

}

 border: solid 1px var(--primary);

I'm trying to do something like this, but it isn't working.

Answer 1

Your gradient values seem to the same color so there is no effect when i tested.

I have added secondary and primary random color to linear gradient for you you can change them as you want.

To apply css via :root to the border you need to use border-image: css property and border-image-slice for the border

I have added border 4px solid for testing purposes and some padding as well.

To read more about using linear gradients on border-image and border-image-slice here is the official MDN reference

Run snippet below to see it working.

:root {
  --primary: 78, 137, 176, 1;
  --secondary: 115, 192, 85, 1;
}

p {
  border: 4px solid;
  border-image: linear-gradient(90deg, rgba(var(--secondary)) 0%, rgba(var(--primary)) 100%);
  border-image-slice: 1;
  padding: 4px;
}

<p>We can take advantage of being able to apply CSS to the and keep our markup clean!</p>