Gradient border

그라데이션 보더

Putting a gradient on the border line itself. border-color only accepts a solid colour, so it takes a background trick.

Also known as: Rainbow borderborder-image gradient

···

html

<div class="card" id="gb"><strong>Featured</strong><span>Gradient border</span></div>

css

.card{--a:0deg;position:relative;width:min(240px,78%);padding:26px 22px;border-radius:18px;text-align:center;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    conic-gradient(from var(--a),var(--accent),var(--accent-2),var(--accent-3),var(--accent)) border-box;
  border:3px solid transparent;color:var(--fg);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.card strong{display:block;font-size:18px;margin-bottom:4px}
.card span{color:var(--muted);font-size:13px}

const card = document.getElementById('gb');
let a = 0;
function loop() { a = (a + 0.7) % 360; card.style.setProperty('--a', a + 'deg'); requestAnimationFrame(loop); }
loop();

Either use border-image: linear-gradient(...) 1, or the more common "double background" trick — one background on padding-box (the real fill colour) and a gradient on border-box, so the gradient only shows through the border's thickness. The double-background version plays nicer with border-radius, so it's more widely used.

Continuously rotating the gradient's angle with JS produces an animated border that looks like light sweeping around the edge.

When to use

Use for highlighted cards, "featured" badges, active-tab indicators. Using several on one screen flattens the hierarchy — use it sparingly.