Thuộc tính border-block-start-style trong CSS
Bùi Tấn Lực - 866
- 05/10/2025
Chức năng của Thuộc tính border-block-start-style trong CSS
Thuộc tính border-block-start-style trong CSS dùng để quy định kiểu đường viền trên cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-block-start-width để quy định chiều rộng và thuộc tính border-block-start-color để quy định màu sắc cho đường viền.
Cú pháp của Thuộc tính border-block-start-style trong CSS
border-block-start-style: kieuduongvien;
kieuduongvien: Kiểu đường viền trên ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
Code Thuộc tính border-block-start-style trong CSS
border-block-start-style: solid;
border-block-start-style: dotted;
border-block-start-style: double;
border-block-start-style: dashed;
border-block-start-style: inset;
border-block-start-style: outset;
border-block-start-style: ridge;
border-block-start-style: groove;
border-block-start-style: none;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-block-start-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-start-width: 5px;border-block-start-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-block-start-style trong CSS</h1>
<span>Dùng để quy định kiểu đường viền trên cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-block-start-width để quy định chiều rộng và thuộc tính border-block-start-color để quy định màu sắc cho đường viền:</span>
<div style="border-block-start-style: solid;">border-block-start-style: solid;</div>
<div style="border-block-start-style: dotted;">border-block-start-style: dotted;</div>
<div style="border-block-start-style: double;">border-block-start-style: double;</div>
<div style="border-block-start-style: dashed;">border-block-start-style: dashed;</div>
<div style="border-block-start-style: inset;">border-block-start-style: inset;</div>
<div style="border-block-start-style: outset;">border-block-start-style: outset;</div>
<div style="border-block-start-style: ridge;">border-block-start-style: ridge;</div>
<div style="border-block-start-style: groove;">border-block-start-style: groove;</div>
<div style="border-block-start-style: none;">border-block-start-style: none;</div>
<div style="border-block-start-style: hidden;">border-block-start-style: hidden;</div>
</body>
</html>
Cách kết hợp border-block-start-style với các thuộc tính border-block-start trong CSS
border-block-start-style chỉ xác định kiểu hiển thị của đường viền ở cạnh bắt đầu theo hướng block. Để tạo một đường viền hoàn chỉnh, bạn có thể kết hợp thuộc tính này với độ dày và màu sắc thông qua border-block-start-width và border-block-start-color.
Kết hợp border-block-start-style với border-block-start-width
border-block-start-width kiểm soát độ dày của đường viền, trong khi border-block-start-style quyết định đường viền hiển thị liền, nét đứt, chấm hoặc theo kiểu khác. Hai thuộc tính này thường được thiết lập cùng nhau để kiểm soát rõ hơn diện mạo của cạnh viền.
.box {
border-block-start-style: solid;
border-block-start-width: 3px;
}
Cách kết hợp này phù hợp khi cần tạo điểm nhấn ở đầu một khối nội dung nhưng vẫn muốn tách riêng việc kiểm soát kiểu và độ dày đường viền.
Kết hợp border-block-start-style với border-block-start-color
border-block-start-color cho phép thay đổi màu của đường viền. Khi đi cùng border-block-start-style, bạn có thể tạo đường viền có kiểu và màu sắc theo đúng thiết kế mà không cần phụ thuộc vào hướng viết của nội dung.
.box {
border-block-start-style: dashed;
border-block-start-color: #2563eb;
}
Trong thực tế, nên xác định cả kiểu và màu khi muốn đường viền thể hiện rõ ràng. Nếu chưa có kiểu viền phù hợp, việc chỉ thay đổi màu có thể không tạo ra đường viền như mong muốn.
Khi nào nên dùng border-block-start thay cho các thuộc tính riêng lẻ?
border-block-start là thuộc tính viết tắt giúp thiết lập độ dày, kiểu và màu của đường viền trong cùng một khai báo. Cách này phù hợp khi các giá trị đã xác định rõ và không cần kiểm soát từng thành phần riêng biệt.
.box {
border-block-start: 2px solid #333;
}
Ngược lại, nên dùng các thuộc tính như border-block-start-style, border-block-start-width và border-block-start-color khi cần thay đổi từng giá trị độc lập, chẳng hạn khi kiểu viền được giữ nguyên nhưng màu hoặc độ dày thay đổi theo trạng thái của phần tử.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-block-start-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 *
