Thiết lập border-image-width với CSS

Giới thiệu

Thuộc tính border-image-width xác định độ dày của border image (khu vực hiển thị hình ảnh border). Nó hoạt động độc lập với border-width.

Cú pháp

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

• <length>: px, em, rem... (ví dụ: 10px)
• <number>: Hệ số nhân của border-width (ví dụ: 2 = 2× border-width)
• <percentage>: Phần trăm so với kích thước border image area
• auto: Tự động dựa trên border-image-slice hoặc kích thước ảnh gốc

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #borderimg1 {
      border: 15px solid transparent;       /* border-width = 15px */
      padding: 15px;
      border-image-source: url(https://tutorialspoint.com/css/images/border.png);
      border-image-repeat: round;
      border-image-slice: 40;
      border-image-width: 20px;             /* Border image dày 20px */
    }
  </style>
</head>
<body>
  <p id="borderimg1">Border image width = 20px (lớn 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ả 4 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 30px;

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

Mối quan hệ với border-width

Mẹo thực tế

Thường dùng shorthand border-image để gọn:

border-image: url(border.png) 40 / 20px / 0 round;
/* source slice / width / outset repeat */