border-image-source
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Theborder-image-sourceCSS property sets the source image used to create an element'sborder image.
Try it
border-image-source: url("/shared-assets/images/examples/border-diamonds.png");border-image-source: url("/shared-assets/images/examples/border-stars.png");border-image-source: repeating-linear-gradient( 45deg, transparent, #4d9f0c 20px);border-image-source: none;<section> <div>This is a box with a border around it.</div></section>#example-element { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; padding: 50px; background: #fff3d4; color: black; border: 30px solid; border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 round; font-size: 1.2em;}Theborder-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.
Syntax
css
/* Keyword value */border-image-source: none;/* <image> values */border-image-source: url("image.jpg");border-image-source: linear-gradient(to top, red, yellow);/* Global values */border-image-source: inherit;border-image-source: initial;border-image-source: revert;border-image-source: revert-layer;border-image-source: unset;Values
noneNo border image is used. The appearance defined by
border-styleis displayed instead.<image>Image reference to use for the border.
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements, except internal table elements whenborder-collapse iscollapse. It also applies to::first-letter. |
| Inherited | no |
| Computed value | none or the image with its URI made absolute |
| Animation type | discrete |
Formal syntax
border-image-source =
none|
<image>
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Examples
Basic example
css
.box { border-image-source: url("image.png");}Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-source |
Browser compatibility
Loading…