Borders & Outlines
border-image
Drawing an image around an element as its border.
Overview
| Class | Declarations |
|---|---|
border-image:initial | border-image: initial;
|
border-image:inherit | border-image: inherit;
|
border-image:<source>|<slice> | border-image: <source> <slice>;
|
border-image:<source>|<slice>/<width> | border-image: <source> <slice>/<width>;
|
border-image:<source>|<slice>/<width>/<outset>|<repeat> | border-image: <source> <slice>/<width>/<outset> <repeat>;
|
Basic usage
Draw a gradient border image
Use border-image to set the source, slice, optional width, outset, and repeat behavior in one declaration. Keep a regular border width and style as a fallback.
Gradient border image
The image is sliced and painted into the border area.
<div class="b:16px|solid|transparent border-image:linear-gradient(45deg,dodgerblue,hotpink)|30"> Gradient border image</div>Include width and repeat
The shorthand can also include border image width after / and repeat behavior after |.
<div class="b:16px|solid|transparent border-image:linear-gradient(45deg,dodgerblue,hotpink)|30/16|round"> Rounded repeat border image</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="border-image:linear-gradient(45deg,dodgerblue,hotpink)|30:hover border-image:linear-gradient(45deg,dodgerblue,hotpink)|30@sm border-image:linear-gradient(45deg,dodgerblue,hotpink)|30@dark border-image:linear-gradient(45deg,dodgerblue,hotpink)|30@print">…</div>