Baseline Widely available
The border-image-source
CSS property sets the source image used to create an element's border image.
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 id="default-example">
<div id="example-element">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;
}
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;
Values
none
No border image is used. The appearance defined by border-style
is displayed instead.
<image>
Image reference to use for the border.
border-image-source =Examples Basic example
none |
<image><image> =
<url> |
<gradient><url> =
<url()> |
<src()><url()> =
url( <string> <url-modifier>* ) |
<url-token><src()> =
src( <string> <url-modifier>* )
.box {
border-image-source: url("image.png");
}
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4