Gradient border

Quick implementation

.gradient-border {
  --border-w: 2px;
  border-radius: 1rem;
  background:
    linear-gradient(
      var(--surface, oklch(0.22 0.01 260)),
      var(--surface, oklch(0.22 0.01 260))
    ) padding-box,
    linear-gradient(
      135deg,
      oklch(0.72 0.22 330),
      oklch(0.7 0.18 270),
      oklch(0.75 0.2 195)
    ) border-box;
  border: var(--border-w) solid transparent;
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any code-generating model to scaffold the pattern instantly.

Create a CSS class called .gradient-border that renders a
gradient border on a card element. Use the double-background
technique: one background layer clipped to padding-box for
the card fill, and a second layer clipped to border-box for
the gradient. Set the border to transparent. Use oklch()
colors for the gradient stops (pink at 330, purple at 270,
teal at 195). Make the border width customisable with a
--border-w custom property defaulting to 2px. Add
border-radius: 1rem.

Why this matters

Standard CSS border-color only accepts a single flat color. To get a gradient border you either need border-image (which does not work with border-radius) or the double-background approach shown here. This technique keeps rounded corners intact while giving you full control over the gradient direction and color stops.

The logic

Two background layers are declared on the same element. The first is a solid color clipped to padding-box, so it fills the inside of the card. The second is the gradient, clipped to border-box, which extends beneath the border area. Because the actual border is set to transparent, the gradient shows through. The border width becomes the visible thickness of the gradient stroke. Adjusting --border-w changes it globally.

Accessibility & performance

Gradient borders are purely decorative and do not affect assistive technology. Ensure the card content itself meets WCAG contrast ratios against the card background. Since this technique uses only CSS gradients and no images, it is resolution-independent and adds zero network requests. For users who prefer reduced motion, no animation is involved, but if you add a hover transition on the gradient, wrap it in a prefers-reduced-motion media query.