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