Skip to main content
CSS Tip

Border gradient with border-radius

Save this code for the future! It will be the easiest way to add a gradient coloration to borders while having rounded corners.

CSS gradient border with border-radius

⚠️ There is no implementation yet, but it's good to know.

.gradient-border {
border: 5px solid #0000;
border-radius: 25px;
background: linear-gradient(#FF4E50,#40C0CB) border-box;
background-clip: border-area; /* The new added value */
}

Related: [css-backgrounds] background-clip: border-area


Until then, you can rely on CSS mask and pseudo-element if you want transparency

.gradient-border {
border-radius: 25px;
position: relative;
}
.gradient-border:before {
content: "";
position: absolute;
inset: 0;
padding: 5px; /* border length */
background: linear-gradient(#FF4E50,#40C0CB);
border-radius: inherit;
mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
}

Or two background layers if transparency is not required:

.gradient-border {
border: 5px solid #0000;
border-radius: 25px;
background:
conic-gradient(#fff /* the background color */ 0 0) padding-box,
linear-gradient(#FF4E50,#40C0CB) border-box;
}

See the Pen Untitled by Temani Afif (@t_afif) on CodePen.