Thuộc tính CSS border-image-width

Giới thiệu

Thuộc tính border-image-width thiết lập độ dày của khu vực hiển thị border image. Nó xác định "khung" nơi hình ảnh border được vẽ, độc lập với border-width.

Cú pháp

border-image-width: [ <length> | <number> | <percentage> | auto ]{1,4};

Ví dụ: border-image-width: 10px

<!DOCTYPE html>
<html>
<head>
  <style>
    #borderimg1 {
      border: 15px solid transparent;
      padding: 15px;
      border-image-source: url(https://tutorialspoint.com/css/images/border.png);
      border-image-repeat: round;
      border-image-slice: 50;
      border-image-width: 10px;  /* Border image dày 10px */
    }
  </style>
</head>
<body>
  <p id="borderimg1">Border image width = 10px (nhỏ hơn border-width 15px)</p>
</body>
</html>

4 giá trị (trên | phải | dưới | trái)

/* 1 giá trị: tất cả cạnh */
border-image-width: 10px;

/* 2 giá trị: trên/dưới | trái/phải */
border-image-width: 10px 20px;

/* 3 giá trị: trên | trái/phải | dưới */
border-image-width: 10px 20px 15px;

/* 4 giá trị: trên | phải | dưới | trái */
border-image-width: 10px 20px 15px 5px;

Đơn vị <number> — Hệ số của border-width

.example {
  border-width: 10px;
  border-image-width: 2;     /* = 2 × 10px = 20px */
  border-image-width: 0.5;   /* = 0.5 × 10px = 5px */
}

Mối quan hệ 3 thuộc tính width

Thuộc tính	Vai trò	Mặc định
`border-width`	Độ dày vùng border trong box model (ảnh hưởng layout)	medium (~3px)
`border-image-width`	Độ dày khu vực vẽ border image (không ảnh hưởng layout)	1 (× border-width)
`border-image-outset`	Mở rộng border image ra ngoài box model	0

Lưu ý thực tế

Nếu border-image-width > border-width: border image tràn ra padding/content area
Nếu border-image-width < border-width: có khoảng trống trong vùng border
Thường dùng shorthand: border-image: url(img.png) 30 / 20px round; (slice / width repeat)
auto: Dùng giá trị border-image-slice hoặc kích thước ảnh gốc