Codectionary / Developer documentation / CSS

Gradient Borders with border-image

border-image paints a border using an image and slicing rules instead of only a solid border colour.

What it is and why to use it

border-image paints a border using an image and slicing rules instead of only a solid border colour. A gradient counts as an image, so it can supply a border without downloading an asset. This is useful for a restrained visual accent around a panel.

Common mistakes and limitations

border-radius does not simply round a border-image in the same way as an ordinary border. Slicing, repeat and width values have their own rules. Test the fallback and avoid encoding essential meaning only in the gradient.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="panel">A panel with a gradient border and real text content.</div>

Syntax

border-image: linear-gradient(90deg, blue, purple) 1;

Examples

Gradient Borders with border-image

Run the CSS against the supplied HTML, then experiment with the values.

.panel { border: 4px solid #2563eb; border-image: linear-gradient(90deg, #2563eb, #7c3aed) 1; padding: 1rem; color: #0f172a; background: white; }
  1. The ordinary border supplies a width and fallback styling.
  2. The gradient becomes the border image, and slice value 1 defines its image slicing.
  3. Padding keeps the text away from the painted edge. This is useful for a decorative boundary, not as the only indication of an error state.
HTML used by this example
<div class="demo"><div class="panel">A panel with a gradient border and real text content.</div></div>

Best practices

  • border-radius does not simply round a border-image in the same way as an ordinary border. Slicing, repeat and width values have their own rules. Test the fallback and avoid encoding essential meaning only in the gradient.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading