border-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính border-image trong CSS vẽ một hình ảnh xung quanh một phần tử. Nó thay thế đường viền thông thường của phần tử.

Note: Bạn nên chỉ định một border-style riêng biệt phòng trường hợp hình ảnh đường viền không tải được. Mặc dù đặc tả không yêu cầu nghiêm ngặt, một số trình duyệt không hiển thị hình ảnh đường viền nếu border-style là none hoặc border-width là 0.

Try it

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /
  19px round;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
  fill / 30px / 30px space;

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)
  60;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Thuộc tính thành phần

Thuộc tính này là dạng viết tắt của các thuộc tính CSS sau:

Cú pháp

css

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

/* Giá trị toàn cục */
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;

Thuộc tính border-image có thể được chỉ định với một đến năm giá trị trong danh sách bên dưới.

Note: Nếu giá trị đã tính toán của border-image-source là none, hoặc nếu hình ảnh không thể hiển thị, thì border-style sẽ được hiển thị thay thế.

Giá trị

<'border-image-source'>: Hình ảnh nguồn. Xem border-image-source.
<'border-image-slice'>: Kích thước để cắt hình ảnh nguồn thành các vùng. Có thể chỉ định tối đa bốn giá trị. Xem border-image-slice.
<'border-image-width'>: Độ rộng của hình ảnh đường viền. Có thể chỉ định tối đa bốn giá trị. Xem border-image-width.
<'border-image-outset'>: Khoảng cách của hình ảnh đường viền từ cạnh ngoài của phần tử. Có thể chỉ định tối đa bốn giá trị. Xem border-image-outset.
<'border-image-repeat'>: Xác định cách các vùng cạnh của hình ảnh nguồn được điều chỉnh để phù hợp với kích thước hình ảnh đường viền. Có thể chỉ định tối đa hai giá trị. Xem border-image-repeat.

Khả năng tiếp cận

Công nghệ hỗ trợ không thể phân tích cú pháp hình ảnh đường viền. Nếu hình ảnh chứa thông tin quan trọng để hiểu mục đích tổng thể của trang, tốt hơn là mô tả nó theo nghĩa ngữ nghĩa trong tài liệu.

Định nghĩa hình thức

Initial value	as each of the properties of the shorthand: `border-image-source`: `none` `border-image-slice`: `100%` `border-image-width`: `1` `border-image-outset`: `0` `border-image-repeat`: `stretch`
Applies to	all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`.
Inherited	no
Percentages	as each of the properties of the shorthand: `border-image-slice`: refer to the size of the border image `border-image-width`: refer to the width or height of the border image area
Computed value	as each of the properties of the shorthand: `border-image-outset`: as specified, but with relative lengths converted into absolute lengths `border-image-repeat`: as specified `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified `border-image-source`: `none` or the image with its URI made absolute `border-image-width`: as specified, but with relative lengths converted into absolute lengths
Animation type	as each of the properties of the shorthand: `border-image-outset`: by computed value type `border-image-repeat`: discrete `border-image-slice`: by computed value type `border-image-source`: discrete `border-image-width`: by computed value type

Cú pháp hình thức

border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>                             

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

<border-image-width> = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<border-image-outset> = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}  

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<length-percentage> = 
  <length>      |
  <percentage>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Ví dụ

Bitmap

Trong ví dụ này, chúng ta sẽ áp dụng họa tiết kim cương cho đường viền của một phần tử. Nguồn cho hình ảnh đường viền là tệp ".png" có kích thước 81 x 81 pixel, với ba viên kim cương theo chiều dọc và chiều ngang:

Tám viên kim cương: bốn kim cương đỏ, mỗi góc một viên, và bốn kim cương cam, mỗi cạnh một viên. Phần giữa trống.

HTML

html

<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>

CSS

Để khớp với kích thước của một viên kim cương đơn, chúng ta sẽ dùng giá trị 81 chia 3, tức là 27, để cắt hình ảnh thành các vùng góc và cạnh. Để căn giữa hình ảnh đường viền trên cạnh của nền phần tử, chúng ta sẽ đặt các giá trị outset bằng một nửa giá trị width. Cuối cùng, giá trị repeat là round sẽ làm cho các mảnh đường viền vừa khít, tức là không bị cắt xén hoặc có khoảng trống.

css

#bitmap {
  width: 200px;
  background-color: #ffffaa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}

Kết quả

Gradient

HTML

html

<div id="gradient">
  This element is surrounded by a gradient-based border image!
</div>

CSS

css

#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #ff3333, #33bbff, #ff3333 30px)
    60;
  padding: 20px;
}

Kết quả

Đường viền bo tròn

border-radius không có tác dụng lên hình ảnh đường viền. Điều này là vì border-image-outset có thể đặt hình ảnh bên ngoài hộp đường viền, nên việc cắt hình ảnh đường viền theo vùng đường viền không có ý nghĩa. Để tạo đường viền bo tròn khi dùng hình ảnh đường viền, bạn nên tạo hình ảnh với các góc bo tròn, hoặc trong trường hợp gradient, vẽ nó như nền thay thế. Dưới đây là một cách tiếp cận sử dụng hai background-image: một mở rộng hộp đường viền và một cho hộp đệm.

HTML

html

<div id="rounded">
  This element is surrounded by a border image with rounded corners!
</div>

CSS

css

#rounded {
  width: 200px;
  /* Use transparent so the background image is visible */
  border: 10px solid transparent;
  padding: 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(white, white), linear-gradient(to right, cyan, lime);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Kết quả

Note: Có một giá trị background-clip: border-area mới đang được đề xuất để giải quyết trường hợp sử dụng này.

Đặc tả kỹ thuật

Specification
CSS Backgrounds and Borders Module Level 3 # border-image

Tương thích trình duyệt

Xem thêm

border
outline
box-shadow
background-image
Kiểu <url>
Các hàm gradient: conic-gradient(), repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
Hình ảnh đường viền trong CSS: Trọng tâm chính cho Interop 2023 trên MDN blog (2023)

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content