Borders & Outlines
border-image-source
Setting the source image used to create an element border image.
Overview
| Class | Declarations |
|---|---|
border-image-source:none | border-image-source: none;
|
border-image-source:<image> | border-image-source: <image>;
|
border-image-source:url(<…>) | border-image-source: url(<…>);
|
border-image-source:linear-gradient(<…>) | border-image-source: linear-gradient(<…>);
|
Basic usage
Set a gradient source
Use border-image-source to choose the image painted into the border. Pair it with border-image-slice, plus a visible border width and style.
Gradient source
The source image supplies the pixels for the border.
<div class="b:16px|solid|transparent border-image-source:linear-gradient(135deg,dodgerblue,hotpink) border-image-slice:30"> Gradient source</div>Use no source
When the source is none, the normal border style is displayed instead.
<div class="b:16px|solid|blue-60 border-image-source:none">Fallback border</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="border-image-source:linear-gradient(135deg,dodgerblue,hotpink):hover border-image-source:linear-gradient(135deg,dodgerblue,hotpink)@sm border-image-source:linear-gradient(135deg,dodgerblue,hotpink)@dark border-image-source:linear-gradient(135deg,dodgerblue,hotpink)@print">…</div>