HTML & CSS

Add a Linear Gradient as a Rounded CSS Border

Add a linear-gradient border using two background layers, keep a plain reading surface, and vary border thickness without losing rounded corners or link focus.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Paint the gradient behind a transparent border

A linear gradient can form a rounded decorative border when you paint it in the border box and cover the inner area with a solid background layer. The gradient is still a background image; border-color itself does not accept a gradient. A transparent physical border creates the space where the lower gradient remains visible.

This method uses two layers on one element. The first is an opaque white image clipped to the padding box, and the second is the colored gradient clipped to the border box. Because the inner layer is opaque, the text sits on a plain surface while the gradient shows only around its perimeter.

Build a card with a three-pixel gradient border

The card below uses the layered background shorthand to assign each image its painting box. A repeated white color in the first linear gradient creates a solid image layer. The second gradient provides the actual color transition. Both layers follow the rounded shape of the element.

<article class="gradient-border-card">
  <h2>A rounded gradient border</h2>
  <p>The interior stays white while the border changes color.</p>
  <a href="#border-details">View the details</a>
</article>
<section id="border-details"><h2>Border details</h2></section>

.gradient-border-card {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 1rem auto;
  padding: 1.5rem;
  border: 3px solid transparent;
  border-radius: 1rem;
  color: #172554;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #1d4ed8, #be185d) border-box;
  overflow-wrap: anywhere;
}
.gradient-border-card a { color: #1d4ed8; }
.gradient-border-card a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
@media (forced-colors: active) {
  .gradient-border-card {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
  }
}

The first layer must be above the colored layer. Reversing their order would let the colored gradient cover the reading surface. Removing the transparent border would remove most of the visible band, because the opaque inner layer would then reach almost the same edge as the outer layer.

Adjust border thickness and radius independently

Change the border width from three to six pixels to create a stronger frame. The border-box sizing rule keeps that thickness within the card’s width. You can change border-radius separately to alter the corner shape; increasing the gradient angle is not a substitute for changing the geometry of the border itself.

At very large border widths relative to the radius, the inner and outer corners can look different from a thin outline. Inspect the actual card rather than assuming every thickness is visually interchangeable. The text padding is a separate spacing choice and should remain sufficient after the border changes.

Generate the colored layer only

In the CSS Gradient Generator, choose Linear, set angle 135, and enter #1d4ed8 and #be185d. Use the gradient function from its output as the second background layer. The first white layer, transparent border, painting boxes and focus styles are additions made in this recipe.

The generator does not export a gradient-border component or inspect your element’s corner radius. Its preview fills a box with a gradient. When you place that same value behind an opaque inner layer, you are applying a separate CSS composition technique rather than enabling a hidden border mode.

Understand the two painting areas

Background clipping determines how far a background is painted, while background origin determines the box used to position it. The single box keyword in each shorthand layer sets both roles for that layer. MDN’s background-origin reference and background-clip reference describe those related controls.

A later background declaration can replace this entire two-layer arrangement. If the border disappears after adding a theme rule, inspect the winning background-image and clipping lists. Do not compensate by adding a shadow unless a shadow is actually the intended design; first restore the required layers.

Verify content and alternate presentation

Check the card at phone width with a long heading and increased text size. The gradient should stay at the perimeter while the white interior expands with content. Tab to the link and confirm that its focus outline remains distinguishable from the decorative border, since those two outlines serve different purposes.

Enable forced colors and verify that a solid system-colored border remains when the gradient is suppressed. The border is decorative in this example, but preserving the card boundary can still help readers understand its grouping. Do not use the gradient alone to indicate selection, validation errors or another state that needs an explicit label.