How to create gradient border and add radius to it

September 16, 2024

You might have tried to create a gradient to a border using border-image property that looks similar to this

<div class='border-gradient'>The Reaction</div>

.border-gradient {
    display: inline-block;
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(to right, darkblue, darkorchid) 1;
    border-radius: 16px; /*<-- doesn't work*/
}

The Reaction

But you then quickly realized that border-radius property doesn’t work. So, how can we solve this?

we can use the background-clip property!

<div class='border-gradient-with-clip'>The Reaction</div>

.border-gradient-with-clip {
    background:
            linear-gradient(to right, white, white) padding-box, /*change the color 'white' to your need*/
            linear-gradient(to right, tomato, blue) border-box; /*this is the border gradient*/
    border: 2px solid transparent;
    border-radius: 16px;
}

The Reaction