CSS3 Border Images

CSS3 cung cấp thuộc tính border-image cho phép tạo khung viền cho một phần tử bằng hình ảnh. Trình duyệt hỗ trợ:

Chrome

IE/Edge

Firefox

Safari

Opera

border-image

16.0 +

4.0 -webkit-

11.0 +

15.0 +

3.5 -moz-

6.0 +

3.1 -webkit –

15.0 +

11.0 -o-

Đối với Chrome, Firefox, Safari, và Opera kể từ các phiên bản Chrome 4.0, Firefox 3.5, Safari 3.1, và Opear 11.0, khi làm việc với thuộc tính border-image có sử dụng thêm tiền tố (prefix) -webkit-, -moz-, và -o-.

Ví dụ:


#borderimg {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */

border-image: url(border.png) 30 round;

}

<p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p>

Kết quả: