CSS Tip

Border gradient with border-radius

Save this code for the future! It's the easiest way to add a gradient coloration to borders while having rounded corners. No need for an extra element or pseudo-element and you have a transparent background!

CSS gradient border with border-radius

.gradient-border {
  border: 10px solid #0000;
  background: 
    linear-gradient(#FF4E50,#40C0CB) 
    border-box border-area; /* border-box can be omitted here */
}

border-area is a new value for background-clip that clips the background to the border area. As simple as that!

Here is the longhand version for more clarity:

.gradient-border {
  border: 10px solid #0000;
  background-image: linear-gradient(#FF4E50,#40C0CB);
  background-origin: border-box;
  background-clip: border-area;
}

⚠️ Support is still limited (missing Firefox) ⚠️

See the Pen Gradient borders with rounded corners by Temani Afif (@t_afif) on CodePen.

Until better support, 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: 10px; /* border length  */
  background: linear-gradient(#FF4E50,#40C0CB);
  border-radius: inherit;
  mask: conic-gradient(#000) content-box exclude,conic-gradient(#000);
}

Or two background layers if transparency is not required:

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

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

More CSS Tips