The border-image CSS property draws an image around a given element. It replaces the element's regular border.
/* source | slice */
border-image: linear-gradient(red, blue) 27;
/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;
/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;
/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;This property is a shorthand for the following CSS properties:
Fallback:
In order to ensure a border will be displayed no matter the browser, we should use a fallback border before the border-image:
element {
border: 1px solid red;
border-image: linear-gradient(red, blue) 27;
}
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image