Thuộc tính border-image | CSS3

Đị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 của border image trong css3:

Thuộc tính	giá trị	Mô tả
Border image
border-image-source	url	Đường dẫn tới image dùng làm border.
border-image-slice (Giá trị % hoặc số)	1 giá trị [top right bottom left]	Phần lát cắt image với 4 thành phần của border như nhau.
	2 giá trị [top bottom] [left right]	Phần lát cắt image với 2 thành phần ngang của border như nhau và 2 thành phần dọc cũng như nhau.
	3 giá trị [top] [left right] [bottom]	Phần lát cắt image với thành phần dọc của border như nhau.
	4 giá trị [top] [right] [bottom] [left]	Phần lát cắt image với 4 thành phần của border khác nhau.
border-image-width (Giá trị theo đơn vị)	1 giá trị [top right bottom left]	Bề rộng image với 4 thành phần của border như nhau.
	2 giá trị [top bottom] [left right]	Bề rộng image với 2 thành phần ngang của border như nhau và 2 thành phần dọc cũng như nhau.
	3 giá trị [top] [left right] [bottom]	Bề rộng image với thành phần dọc của border như nhau.
	4 giá trị [top] [right] [bottom] [left]	Bề rộng image với 4 thành phần của border khác nhau.
border-image-outset (Giá trị theo đơn vị)	1 giá trị [top right bottom left]	Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với 4 thành phần của border vượt ra ngoài như nhau.
	2 giá trị [top bottom] [left right]	Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với 2 thành phần ngang của border vượt ra ngoài như nhau và 2 thành phần dọc cũng như nhau.
	3 giá trị [top] [left right] [bottom]	Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với thành phần dọc của border như nhau.
	4 giá trị [top] [right] [bottom] [left]	Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với 4 thành phần của border khác nhau.
border-image-repeat Chú ý: border-image-repeat không có nghĩa khi sử dụng 3 giá trị trở lên.	repeat	Image của border sẽ được lặp lại, cả phần nội dung và phần border.
	round	Image của border sẽ được lặp lại, cả phần nội dung và phần border, tuy nhiên vùng lặp sẽ tự động tỷ lệ cho phù hợp với vùng bao.
	stretch	Image của border sẽ được kéo dài, nếu border-image-repeat không khai báo thì border image sẽ có dạng stretch.
border-image	source slice / width / outset repeat	Tổng hợp của các dạng border-image trên.

Ví dụ

Xem thêm 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:

p {
/* Safari and Chrome */
-webkit-border-image-source: url(images/border.png);
-webkit-border-image-slice: 30;
-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(images/border.png);
-moz-border-image-slice: 30;
-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(images/border.png);
-ms-border-image-slice: 30;
-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(images/border.png);
-o-border-image-slice: 30;
-o-border-image-width: 10px 20px;
-o-border-image-outset: 0 10px 10px 30px;
-o-border-image-repeat: round;

/* CSS3 */
border-image-source: url(images/border.png);
border-image-slice: 30;
border-image-width: 10px 20px;
border-image-outset: 0 10px 10px 30px;
border-image-repeat: round;
}

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

border image

Ta có thể viết gọn lại như sau, CSS viết:

p {
/* Safari and Chrome */
-webkit-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Firefox */
-moz-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Internet Explorer */
-ms-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Opera */
-o-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* CSS3 */
border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;
}

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

border image

Trình duyệt và hệ điều hành 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ợ cho thuộc tính border-image:

	Trình duyệt PC					Smartphone - Tablets

border-image	10	12 -moz-	12 -o-	20	5.1 -webkit-	3.2 -webkit-	2.1 -webkit-	8

Link liên quan

Nhiều background

border-radius