border-image-source
Baseline: Widely supported
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
The border-image-source
CSS property sets the source image used to create an element's border image.
Try it
The border-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
none
-
No border image is used. The appearance defined by
border-style
is displayed instead. <image>
-
Image reference to use for the border.
Formal definition
Initial value | none |
---|---|
Applies to | all elements, except internal table elements when border-collapse is collapse . 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> |
<gradient>
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
Examples
Basic example
css
.box {
border-image-source: url("image.png");
}
Specifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-image-source |
Browser compatibility
BCD tables only load in the browser
See also
border
outline
box-shadow
background-image
url()
function