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.

More CSS Tips