In css, you can use the "border-image-source" and "border-image-slice" attributes to set the border background image. The syntax "element {border-image-source:url(picture path); border-image -slice:value}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to set a background image for the border in css
In css, if you want to set a background image for the border, you need to pass border-image-source properties and the border-image-slice property.
border-image-source is used to set the background image of the border, and the border-image-slice attribute is used to set the style of the border background image.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 300px;
height: 300px;
margin: 100px;
border: 10px solid #000;
border-image-source: url(1118.02.png);
border-image-slice: 20 20 20 20;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set background image for border in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
