Thuộc tính border-block-end-style trong CSS
Bùi Tấn Lực - 864
- 05/10/2025
Chức năng của Thuộc tính border-block-end-style trong CSS
Thuộc tính border-block-end-style trong CSS dùng để quy định kiểu đường viền dưới cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-block-end-width để quy định chiều rộng và thuộc tính border-block-end-color để quy định màu sắc cho đường viền.
Cú pháp của Thuộc tính border-block-end-style trong CSS
border-block-end-style: kieuduongvien;
kieuduongvien: Kiểu đường viền dưới ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
Code Thuộc tính border-block-end-style trong CSS
border-block-end-style: solid;
border-block-end-style: dotted;
border-block-end-style: double;
border-block-end-style: dashed;
border-block-end-style: inset;
border-block-end-style: outset;
border-block-end-style: ridge;
border-block-end-style: groove;
border-block-end-style: none;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-block-end-style 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-end-width: 5px;border-block-end-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-block-end-style trong CSS</h1>
<span>Dùng để quy định kiểu đường viền dưới cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-block-end-width để quy định chiều rộng và thuộc tính border-block-end-color để quy định màu sắc cho đường viền:</span>
<div style="border-block-end-style: solid;">border-block-end-style: solid;</div>
<div style="border-block-end-style: dotted;">border-block-end-style: dotted;</div>
<div style="border-block-end-style: double;">border-block-end-style: double;</div>
<div style="border-block-end-style: dashed;">border-block-end-style: dashed;</div>
<div style="border-block-end-style: inset;">border-block-end-style: inset;</div>
<div style="border-block-end-style: outset;">border-block-end-style: outset;</div>
<div style="border-block-end-style: ridge;">border-block-end-style: ridge;</div>
<div style="border-block-end-style: groove;">border-block-end-style: groove;</div>
<div style="border-block-end-style: none;">border-block-end-style: none;</div>
<div style="border-block-end-style: hidden;">border-block-end-style: hidden;</div>
</body>
</html>
Ứng dụng border-block-end-style trong CSS
border-block-end-style phù hợp khi cần kiểm soát kiểu đường viền ở cạnh cuối theo hướng hiển thị của phần tử. Thuộc tính này đặc biệt hữu ích trong giao diện hỗ trợ nhiều chế độ viết, giúp cách xác định cạnh viền không phụ thuộc hoàn toàn vào trái hoặc phải.
Tạo đường viền phân cách cho các phần tử
Có thể dùng border-block-end-style để tạo đường phân cách giữa các khu vực như tiêu đề, danh sách, thẻ nội dung hoặc từng mục trong giao diện. Chẳng hạn, kiểu solid tạo đường liền rõ ràng, trong khi dashed hoặc dotted tạo cảm giác nhẹ hơn.
.item {
border-block-end-style: solid;
}
Khi chỉ khai báo kiểu viền, độ dày và màu sắc có thể được thiết lập bằng các thuộc tính liên quan để tạo đường phân cách phù hợp với thiết kế.
Kết hợp border-block-end-style với border-block-end-width
border-block-end-style xác định hình thức của đường viền, còn border-block-end-width quyết định độ dày. Kết hợp hai thuộc tính giúp kiểm soát đường viền rõ ràng hơn thay vì phụ thuộc vào giá trị mặc định.
.title {
border-block-end-style: solid;
border-block-end-width: 2px;
}
Cách viết này thích hợp khi muốn tạo đường viền mảnh cho tiêu đề hoặc đường phân cách có độ nổi bật vừa phải. Có thể thay đổi độ dày tùy vào kích thước và vai trò của thành phần trên trang.
Kết hợp border-block-end-style với border-block-end-color
Để đường viền thể hiện đúng theo thiết kế, có thể kết hợp border-block-end-style với border-block-end-color. Một thuộc tính quyết định kiểu nét, thuộc tính còn lại xác định màu hiển thị.
.box {
border-block-end-style: dashed;
border-block-end-color: #999;
}
Sự kết hợp này phù hợp với các đường phân cách cần tạo điểm nhấn nhưng không muốn chiếm quá nhiều sự chú ý. Khi cần đồng bộ giao diện, nên chọn màu và kiểu nét dựa trên vai trò của phần tử thay vì sử dụng quá nhiều biến thể trên cùng một trang.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-block-end-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 *
