Skip to content
WebTricks

Gradient border

A crisp gradient border on a rounded element using the mask trick, with adjustable width and colors.

  • border
  • gradient
  • mask
  • card
Border width3px
Radius14px
Color 1#6b46ff
Color 2#00e5ff
HTML 
<div class="grad-border">Gradient border</div>
CSS 
:root {
    --bw: 3px;
    --r: 14px;
    --c1: #6b46ff;
    --c2: #00e5ff;
}

.grad-border {
    position: relative;
    padding: 20px 32px;
    border-radius: var(--r);
    background: #12151c;
    color: #fff;
    font-weight: 600;
}
.grad-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--bw);
    background: linear-gradient(135deg, var(--c1), var(--c2));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

How it works

border-image can’t follow border-radius, so a rounded gradient border needs the mask trick on a pseudo-element:

  • ::before fills the element with the gradient and a --bw padding.
  • Two masks — one clipped to the content-box, one to the whole box — are combined with mask-composite: exclude, which keeps only the --bw ring and punches out the middle.

The result is a pixel-crisp gradient border that respects border-radius. Add a conic-gradient and animate the angle for the rotating “PS5” effect.