Thuộc tính border-inline-start trong CSS
Bùi Tấn Lực - 859
- 06/10/2025
Chức năng của Thuộc tính border-inline-start trong CSS
Thuộc tính border-inline-start trong CSS dùng để kẻ đường viền trái cho phần tử HTML bao gồm: chiều rộng, kiểu đường viền, màu sắc.
Cú pháp của Thuộc tính border-inline-start trong CSS
border-inline-start: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền trái, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền trái ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền trái, ví dụ: #ff0000, red,...
Code Thuộc tính border-inline-start trong CSS
border-inline-start: 5px solid green;
border-inline-start: 5px dotted green;
border-inline-start: 1px solid #ff0000;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-inline-start 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}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-inline-start trong CSS</h1>
<span>Dùng để kẻ đường viền trái cho phần tử HTML bao gồm: chiều rộng, kiểu đường viền, màu sắc:</span>
<div style="border-inline-start: 1px solid #ff0000;">border-inline-start: 1px solid #ff0000;</div>
<div style="border-inline-start: 5px solid green;">border-inline-start: 5px solid green;</div>
<div style="border-inline-start: 5px dotted green;">border-inline-start: 5px dotted green;</div>
<div style="border-inline-start: 1px dotted red;">border-inline-start: 1px dotted red;</div>
<div style="border-inline-start: 5px double green;">border-inline-start: 5px double green;</div>
<div style="border-inline-start: 10px double red;">border-inline-start: 10px double red;</div>
<div style="border-inline-start: 5px dashed green;">border-inline-start: 5px dashed green;</div>
<div style="border-inline-start: 10px dashed red;">border-inline-start: 10px dashed red;</div>
<div style="border-inline-start: 1px inset red;">border-inline-start: 1px inset red;</div>
<div style="border-inline-start: 5px inset green;">border-inline-start: 5px inset green;</div>
<div style="border-inline-start: 10px inset red;">border-inline-start: 10px inset red;</div>
<div style="border-inline-start: 1px outset red;">border-inline-start: 1px outset red;</div>
<div style="border-inline-start: 5px outset green;">border-inline-start: 5px outset green;</div>
<div style="border-inline-start: 10px outset red;">border-inline-start: 10px outset red;</div>
<div style="border-inline-start: 1px ridge red;">border-inline-start: 1px ridge red;</div>
<div style="border-inline-start: 5px ridge green;">border-inline-start: 5px ridge green;</div>
<div style="border-inline-start: 1px groove red;">border-inline-start: 1px groove red;</div>
<div style="border-inline-start: 5px groove green;">border-inline-start: 5px groove green;</div>
</body>
</html>
Khi nào nên sử dụng thuộc tính border-inline-start trong CSS?
border-inline-start phù hợp khi muốn tạo đường viền ở đầu chiều inline của phần tử mà không phải cố định theo hướng trái hoặc phải. Cách viết này đặc biệt hữu ích với giao diện hỗ trợ nhiều hướng hiển thị, giúp CSS linh hoạt hơn khi bố cục thay đổi.
border-inline-start khác gì border-left?
border-left luôn hướng đến cạnh trái của phần tử, trong khi border-inline-start xác định cạnh dựa trên hướng inline của văn bản. Vì vậy, hai thuộc tính có thể cho kết quả giống nhau trong bố cục thông thường nhưng không còn tương đương khi hướng viết thay đổi.
Với giao diện chỉ sử dụng hướng viết trái sang phải, border-left vẫn có thể đáp ứng tốt. Tuy nhiên, nếu xây dựng thành phần có khả năng thích ứng với nhiều ngôn ngữ hoặc hướng văn bản, border-inline-start là lựa chọn phù hợp hơn.
border-inline-start hoạt động như thế nào với writing-mode?
border-inline-start bám theo cạnh bắt đầu của trục inline được xác định bởi cách trình bày văn bản. Khi writing-mode thay đổi, vị trí của đường viền cũng có thể thay đổi theo mà không cần viết lại quy tắc CSS cho từng hướng.
Ví dụ, khi sử dụng chế độ viết dọc, cạnh inline-start có thể không còn tương ứng với cạnh trái như trong bố cục ngang thông thường. Đây là điểm khác biệt quan trọng giữa thuộc tính logical và thuộc tính định hướng vật lý như border-left.
.box {
writing-mode: vertical-rl;
border-inline-start: 3px solid #333;
}
Cách viết này giúp đường viền đi theo cấu trúc của nội dung thay vì phụ thuộc vào một phía cố định của màn hình.
Trường hợp thực tế nên dùng border-inline-start
Thuộc tính này đặc biệt hữu ích khi xây dựng giao diện đa ngôn ngữ, component có thể tái sử dụng hoặc thiết kế cần thích ứng với nhiều hướng văn bản. Thay vì tạo nhiều bộ quy tắc cho từng trường hợp, có thể dùng thuộc tính logical để CSS tự thích nghi với cách trình bày nội dung.
Một trường hợp phổ biến là tạo điểm nhấn cho đoạn nội dung, menu hoặc khu vực thông tin bằng một đường viền ở phía bắt đầu của nội dung:
.note {
border-inline-start: 4px solid #666;
padding-inline-start: 12px;
}
Khi kết hợp border-inline-start với các thuộc tính logical khác, bố cục sẽ nhất quán hơn và giảm sự phụ thuộc vào các hướng cố định như trái hoặc phải. Điều này giúp mã CSS dễ bảo trì khi giao diện cần mở rộng cho nhiều ngôn ngữ hoặc thay đổi cách hiển thị.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-inline-start 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 *
