Sử dụng borderImageRepeat để đặt xem đường viền hình ảnh được lặp lại, làm tròn hay kéo dài.
Ví dụ
Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách đặt viền hình ảnh được lặp lại, tròn hơn hay kéo dài -
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: blue;
border: 30px solid;
border-image: url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg');
border-image-slice: 10 10 30 30;
border-image-width: 1 1 1 1;
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div id="box">
<p>
Demo Text!
</p>
</div>
<button onclick="display()">Click me!</button>
<script>
function display() {
document.getElementById("box").style.borderImageRepeat = "round";
}
</script>
</body>
</html>