Border Linear Gradient

Question

I am currently making a website and I want to make the border for a div a linear gradient. I tried to do it the way you put a gradient on a background but that doesn't work

.box {
    width: 300px;
    height: 300px;
    border-radius: 20px;
    border: solid linear-gradient(45deg, #2e01f8, #40c239) 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: grey;
}

<div class="box"></div>

Help would be appreciated.

score 0 · Accepted Answer · answered Feb 22 '22 at 04:37

You can use the border-image css property:

border-width: 4px;
border-style: solid;
border-image: linear-gradient(to bottom, cyan, blue) 1;

Tutorial on how it works: https://codyhouse.co/nuggets/css-gradient-borders#:~:text=How%20to%20create%20gradient%20borders%20in%20CSS.%20To,linear-gradient%20%28to%20right%2C%20darkblue%2C%20darkorchid%29%201%20%3B%20%7D

Border Linear Gradient

1 Answers1