Border gradient with border-radius 관련

CSS > Article(s)

---

Article(s)

---

Border gradient with border-radius

The modern way to add gradient to borders while having rounder corners

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

• No pseudo-element
• One gradient layer
• Transparent background

CSS gradient border with border-radius

Note

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 · Issue #9456 · w3c/csswg-drafts

Lots of use cases around specifying a continuous image across the border area, including gradient borders, patterned borders etc. From a quick search: https://css-tricks.com/gradient-borders-in-css...

---

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 Untitled by t_afif on CodePen.

---

More CSS Tips

• Manual typography using Scroll-driven animations Use a range slider to manually adjust the font-size of your website (100% CSS). July 18, 2024
• Typed CSS variables using @property Upgrade your CSS variables by registring them using the @property. July 17, 2024
• Circular progress using scroll-driven animations Transforming the native progress element into a circular one using scroll-driven animations. July 04, 2024
• Grainy texture using CSS gradients A simple code to create a random-style background to simulate a grainy texture. July 02, 2024

Border gradient with border-radius

---

The modern way to add gradient to borders while having rounder corners