Thuộc tính border-image

Định nghĩa và sử dụng

Thuộc tính border trong css3 dùng để định dạng các dạng border bằng hình ảnh.

Cấu trúc

tag {
    border-image: giá trị;
    -moz-border-image: giá trị;
    -webkit-border-image: giá trị;
    -ms-border-image: giá trị;
    -o-border-image: giá trị;
}

Trong đó:

• -moz-animation hỗ trợ cho firefox.
• -webkit-animation hỗ trợ cho Google Chrome và Safari.
• -ms-animation hỗ trợ cho Internet Explorer.
• -o-animation hỗ trợ cho Opera.

Thuộc tính

Ví dụ

Html viết:

<html>
<head></head>
<body>
<p>border image</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

border image

CSS viết:

div {
/* Safari and Chrome */
    -webkit-border-image-source: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png);
    -webkit-border-image-slice: 60;
    -webkit-border-image-width: 10px 20px;
    -webkit-border-image-outset: 0 10px 10px 30px;
    -webkit-border-image-repeat: round;
    /* Firefox */
    -moz-border-image-source: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png);
    -moz-border-image-slice: 60;
    -moz-border-image-width: 10px 20px;
    -moz-border-image-outset: 0 10px 10px 30px;
    -moz-border-image-repeat: round;
    /* Internet Explorer */
    -ms-border-image-source: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png);
    -ms-border-image-slice: 60;
    -ms-border-image-width: 10px 20px;
    -ms-border-image-outset: 0 10px 10px 30px;
    -ms-border-image-repeat: round;
    /* Opera */
    -o-border-image-source: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png);
    -o-border-image-slice: 60;
    -o-border-image-width: 10px 20px;
    -o-border-image-outset: 0 10px 10px 30px;
    -o-border-image-repeat: round;
    /* CSS3 */
    border-image-source: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png);
    border-image-slice: 60;
    border-image-width: 10px 20px;
    border-image-outset: 0 10px 10px 30px;
    border-image-repeat: round;
}

Hoặc:

p {
    /* Safari and Chrome */
    -webkit-border-image: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png) 60 / 10px 20px / 0 10px 10px 30px round;

    /* Firefox */
    -moz-border-image: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png) 60 / 10px 20px / 0 10px 10px 30px round;

    /* Internet Explorer */
    -ms-border-image: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png) 60 / 10px 20px / 0 10px 10px 30px round;

    /* Opera */
    -o-border-image: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png) 60 / 10px 20px / 0 10px 10px 30px round;

    /* CSS3 */
    border-image: url(https://lth90.top/wp-content/uploads/2023/09/img_planet.png) 60 / 10px 20px / 0 10px 10px 30px round;
}

Hiển thị trình duyệt:

border image

Trình duyệt hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ: