Home > Article > Web Front-end > How to set background image for border in css

How to set background image for border in css

WBOYOriginal: 2021-12-09 11:24:535129browse

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:

How to set background image for border in css

(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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the text css styles?Next article：What are the text css styles?

See more

How to set background image for border in css

Related articles