Make a Rounded Gradient Border with CSS Backgrounds

Use two backgrounds with different clipping areas

A practical way to make a rounded gradient border in CSS is to place an opaque background over the padding area and a gradient behind the border area. A transparent physical border creates room for the outer gradient to show. The element's border radius shapes both layers.

This technique is useful for a card or button with an opaque interior. It does not create a transparent hole through which an unrelated background image remains visible. If the design requires that effect, choose a wrapper or a carefully tested masking approach instead of pretending an opaque inner fill is transparent.

Create a card with a two-layer background

<article class="gradient-card">
  <h2>Weekend route</h2>
  <p>Save the path and check the meeting point.</p>
</article>

.gradient-card {
  box-sizing: border-box;
  max-width: 32rem;
  padding: 1.25rem;
  border: 3px solid transparent;
  border-radius: 1rem;
  color: #182233;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #7c3aed, #0f766e) border-box;
}

.gradient-card:focus-visible {
  outline: 3px solid #182233;
  outline-offset: 4px;
}

@media (forced-colors: active) {
  .gradient-card {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
}

The first background is drawn above the second. Its white fill stops at the padding box, leaving the transparent border area to reveal the colored layer underneath. Reversing the layer order would put the gradient over the interior and change the intended design.

Treat the border as part of the layout

The three-pixel border occupies space. With border-box sizing, a specified width includes that border and the padding. Check the card at the smallest supported viewport, especially when it contains long headings, inputs or an unbroken URL.

Increase the border thickness by changing border-width, then inspect the inner curve. Large radii and a thick border can change the apparent corner shape. Use the actual content height during review; an empty demonstration rectangle may hide awkward corners that appear when the card wraps onto several lines.

Keep the inner fill in sync with the theme

If the card belongs to a dark theme, replace the white inner gradient with the intended dark surface and choose a readable foreground color for that surface. Changing only background-color will not replace the first gradient layer, because that layer is itself an image painted over the background color.

A component variable such as --card-surface can supply both colors of the solid inner gradient. Keep the two endpoint values equal so that the interior remains a uniform surface. If the interior should also have a gradient, treat its text contrast as a separate design decision.

If a framework's background utility makes the colored border disappear, inspect the computed background layers. A later shorthand can replace both images at once. Keep the two-layer declaration in the component rule, and change a dedicated surface variable when switching themes.

Preserve state and focus information

For an actual button, use a button element and keep its normal keyboard behavior. The article element in this example is a static card and should not receive a tab stop simply because it has a decorative border. Apply the focus rule to a genuinely interactive component when adapting it.

Do not use a changing border hue as the only signal for success, error or selection. Include a visible label or other appropriate state indication. A keyboard focus outline should remain distinct from the decorative border and visible against the surrounding page.

Forced-colors mode can remove decorative backgrounds. The explicit solid border in the sample keeps the component boundary visible in that mode. Test it with the real surrounding layout instead of assuming a gradient always survives a user's display settings.

Use the gradient generator to choose the outer color transition. The CSS Images specification defines gradient images, while the background-clip reference explains the clipping areas used by this layered technique.

Related guides

Make Gradient Text in CSS with a Readable Fallback

Apply a CSS gradient to heading text, preserve a solid-color fallback, and check wrapping, forced colors, and readability on the actual background.

Make Gradient Text

Learn make gradient text: follow a focused other developer utilities workflow, then verify code conversion, contrast and rendering context on the final result.

Use Radial Gradients in CSS: Shape, Center, and Size

Create a CSS radial gradient with an explicit shape and center, compare closest-side and farthest-corner sizing, and test the result in changing boxes.