Thuộc tính border-block-style trong CSS
Bùi Tấn Lực - 892
- 05/10/2025
Chức năng của Thuộc tính border-block-style trong CSS
Thuộc tính border-block-style trong CSS dùng để quy định đường viền trên và đường viền dưới cùng một kiểu hoặc mỗi đường viền một kiểu riêng, 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 cả 2 đường viền trên và dưới hoặc từng đường viền riêng.
Code Thuộc tính border-block-style trong CSS
Thuộc tính border-block-style cùng 1 kiểu mẫu trong CSS
Dùng để quy định đường viền trên và đường viền dưới cùng một kiểu, 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:
border-block-style: kieuduongvien;
kieuduongvien: Kiểu đường viền trên và đường viền dưới ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
border-block-style: solid;
border-block-style: solid;border-block-color: #FFD700 green;border-block-width: 5px 1px;
border-block-style: dotted;
border-block-style: double;
border-block-style: dashed;
border-block-style: inset;
border-block-style: outset;
border-block-style: ridge;
border-block-style: groove;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-block-style cùng 1 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 cùng 1 kiểu mẫu trong CSS</h1>
<span>Dùng để quy định đường viền trên và đường viền dưới cùng một kiểu, 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;">border-block-style: solid;</div>
<div style="border-block-style: solid;border-block-color: #FFD700 green;border-block-width: 5px 1px;">border-block-style: solid;border-block-color: #FFD700 green;border-block-width: 5px 1px;</div>
<div style="border-block-style: dotted;">border-block-style: dotted;</div>
<div style="border-block-style: double;">border-block-style: double;</div>
<div style="border-block-style: dashed;">border-block-style: dashed;</div>
<div style="border-block-style: inset;">border-block-style: inset;</div>
<div style="border-block-style: outset;">border-block-style: outset;</div>
<div style="border-block-style: ridge;">border-block-style: ridge;</div>
<div style="border-block-style: groove;">border-block-style: groove;</div>
<div style="border-block-style: none;">border-block-style: none;</div>
<div style="border-block-style: hidden;">border-block-style: hidden;</div>
</body>
</html>
Thuộc tính border-block-style dùng 2 kiểu mẫu trong CSS
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:
border-block-style: kieuduongvien1 kieuduongvien2;
kieuduongvien1: Kiểu đường viền trên ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
kieuduongvien2: Kiểu đường viền dưới ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
border-block-style: solid dotted;
border-block-style: solid dotted;border-block-color: #FFD700 green;border-block-width: 5px 1px;
border-block-style: dotted solid;
<!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>
Cách sử dụng thuộc tính border-block-style trong CSS
Thuộc tính border-block-style dùng để thiết lập kiểu đường viền ở hai cạnh theo hướng block của phần tử. Đây là cách viết ngắn gọn, phù hợp với bố cục sử dụng writing mode vì không phụ thuộc trực tiếp vào cạnh trên, dưới, trái hay phải.
Sử dụng border-block-style cho cả hai đường viền
Khi chỉ cung cấp một giá trị, border-block-style sẽ áp dụng cùng kiểu đường viền cho cả hai cạnh block. Cách này phù hợp khi muốn hai đường viền có cùng thiết lập và giúp CSS ngắn gọn hơn.
.box {
border-block-style: solid;
}
Trong ví dụ trên, cả hai cạnh theo hướng block đều được đặt kiểu solid. Bạn có thể thay giá trị này bằng các kiểu đường viền hợp lệ khác như dashed, dotted hoặc double tùy thiết kế.
Sử dụng border-block-style cho từng đường viền riêng biệt
Thuộc tính này cũng cho phép khai báo hai giá trị. Giá trị đầu tiên áp dụng cho cạnh block đầu tiên, còn giá trị thứ hai áp dụng cho cạnh block đối diện. Nhờ đó, mỗi cạnh có thể sử dụng một kiểu đường viền khác nhau.
.box {
border-block-style: solid dashed;
}
Cách khai báo này hữu ích khi thiết kế cần tạo sự khác biệt giữa hai cạnh, chẳng hạn một cạnh dùng đường liền trong khi cạnh còn lại dùng đường nét đứt.
Kết hợp border-block-style với border-block-width và border-block-color
border-block-style chỉ xác định kiểu đường viền, không quyết định độ dày hay màu sắc. Để tạo đường viền hoàn chỉnh, bạn có thể kết hợp với border-block-width và border-block-color.
.box {
border-block-style: solid;
border-block-width: 2px;
border-block-color: #333;
}
Cách tách riêng từng thuộc tính giúp CSS dễ đọc và thuận tiện khi cần thay đổi từng thành phần. Trong trường hợp thiết kế đơn giản, bạn cũng có thể sử dụng các thuộc tính viết tắt phù hợp để giảm số dòng CSS.
Sử dụng border-block-style với các giá trị khác nhau
border-block-style hỗ trợ nhiều kiểu đường viền CSS như solid, dashed, dotted, double, groove, ridge, inset, outset, cùng một số giá trị đặc biệt như none và hidden.
Việc lựa chọn giá trị nên dựa trên mục đích trình bày. Chẳng hạn, solid phù hợp với đường viền thông thường, dashed tạo cảm giác phân cách nhẹ, còn dotted thích hợp cho các khu vực cần nhấn mạnh sự phân tách mà không tạo đường viền quá nặng.
Khi không muốn hiển thị đường viền ở hướng block, có thể dùng none. Cách này đặc biệt hữu ích khi CSS được dùng chung cho nhiều thành phần nhưng chỉ một số thành phần cần đường viền.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-block-style trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
