Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-block-style dùng 2 kiểu mẫu trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%;float:left;height:auto;background:antiquewhite;margin-bottom:10px;padding:10px;border-block-width: 5px;border-block-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>

<h1>Thuộc tính border-block-style dùng 2 kiểu mẫu trong CSS</h1>

<span>Dùng để quy định kiểu đường viền trên ở vị trí 1 và kiểu đường viền dưới ở vị trí 2, thuộc tính này kết hợp với thuộc tính border-block-width để quy định chiều rộng và thuộc tính border-block-color để quy định màu sắc cho đường viền:</span>

<div style="border-block-style: solid dotted;">border-block-style: solid dotted;</div>

<div style="border-block-style: solid dotted;border-block-color: #FFD700 green;border-block-width: 5px 1px;">border-block-style: solid dotted;border-block-color: #FFD700 green;border-block-width: 5px 1px;</div>

<div style="border-block-style: dotted solid;">border-block-style: dotted solid;</div>

<div style="border-block-style: double solid;">border-block-style: double solid;</div>

<div style="border-block-style: dashed double;">border-block-style: dashed double;</div>

<div style="border-block-style: inset double;">border-block-style: inset double;</div>

<div style="border-block-style: outset inset;">border-block-style: outset inset;</div>

<div style="border-block-style: ridge outset;">border-block-style: ridge outset;</div>

<div style="border-block-style: groove ridge;">border-block-style: groove ridge;</div>

<div style="border-block-style: groove none;">border-block-style: groove none;</div>

<div style="border-block-style: hidden ridge;">border-block-style: hidden ridge;</div>

</body>
</html>

Thuộc tính border-block-style dùng 2 kiểu mẫu trong CSS nằm trong bài viết Thuộc tính border-block-style trong CSS