Demo thiết lập viền thành phần với thuộc tính border trong CSS3 Live code

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Học CSS3 toidicode.com</title>
</head>
<style type="text/css" media="screen">
 .border{
 border:35px solid transparent;
 border-image-source: url(border.png);
 height: 300px;
 border-image-slice: 170;
 border-image-width: 15px;
 border-image-repeat: stretch;
 border-image-outset: 10px;
 }
 .border2{
 border:35px solid transparent;
 border-image-source: url(border.png);
 height: 300px;
 border-image-slice: 20%;
 border-image-width: 25px;
 border-image-repeat: round;
 border-image-outset: 10px 15px;
 }
 .border3{
 border:35px solid transparent;
 border-image-source: url(border.png);
 height: 300px;
 border-image-slice: 20%;
 border-image-width: 25px;
 border-image-repeat: repeat;
 border-image-outset: 15px 20px 35px 30px;
 }
</style>

<body>
 border-image-slice: 150
 border-image-slice: 20%
 border-image-slice: 20%
 Hình ảnh của đường viền viền
 <img src="https://toidicode.com/livepost/php/border.png" width="250px;">
</body>

</html>