The border-image-source
CSS property sets the source image used to create an element's border image.
The border-image-source
CSS property sets the source image used to create an element's border image.
The border-image-slice
property is used to divide the source image into regions, which are then dynamically applied to the final border image.
/* 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;
none
No border image is used. The appearance defined by border-style
is displayed instead.
<image>
Image reference to use for the border.
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 |
border-image-source =
none |
<image>
<image> =
<url> |
<gradient>
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
.box { border-image-source: url("image.png"); }
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
border-image-source |
15 | 12 | 15 | 11 | 15 | 6 | 4.4 | 18 | 15 | 14 | 6 | 1.0 |
border
outline
box-shadow
background-image
url()
function
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source