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