Thuộc tính border-inline-width trong CSS
Bùi Tấn Lực - 831
- 06/10/2025
Chức năng của Thuộc tính border-inline-width trong CSS
Thuộc tính border-inline-width trong CSS dùng để quy định đường viền trái và đường viền phải cùng một chiều rộng hoặc mỗi đường viền một chiều rộng riêng, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho cả 2 đường viền trái và phải hoặc từng đường viền riêng.
Code Thuộc tính border-inline-width trong CSS
Thuộc tính border-inline-width cho 2 đường viền trong CSS
Dùng để quy định đường viền trái và đường viền phải cùng một chiều rộng, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho đường viền:
border-inline-width: chieurong;
chieurong: Chiều rộng của đường viền trái và đường viền phải, ví dụ 1px, 5px,...
border-inline-width: 5px;
border-inline-width: thin;
border-inline-width: thick;
border-inline-width: 5px;border-inline-style: solid double;border-inline-color: #FFD700 green;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-width cho 2 đường viền 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-inline-style: solid;border-inline-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-width cho 2 đường viền trong CSS</h1>
<span>Dùng để quy định đường viền trái và đường viền phải cùng một chiều rộng, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho đường viền:</span>
<div style="border-inline-width: 5px;">border-inline-width: 5px;</div>
<div style="border-inline-width: 5px;border-inline-style: solid double;border-inline-color: #FFD700 green;">border-inline-width: 5px;border-inline-style: solid double;border-inline-color: #FFD700 green;</div>
<div style="border-inline-width: 1px;">border-inline-width: 1px;</div>
<div style="border-inline-width: thin;">border-inline-width: thin;</div>
<div style="border-inline-width: thick;">border-inline-width: thick;</div>
</body>
</html>
Thuộc tính border-inline-width cho từng đường viền trong CSS
Dùng để quy định chiều rộng đường viền trái ở vị trí 1 và chiều rộng đường viền phải ở vị trí 2, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho đường viền:
border-inline-width: chieurong1 chieurong2;
chieurong1: Chiều rộng của đường viền trái, ví dụ 1px, 5px,...
chieurong2: Chiều rộng của đường viền phải, ví dụ 1px, 5px,...
border-inline-width: 5px 1px;
border-inline-width: 1px 5px;
border-inline-width: thin 5px;
border-inline-width: thick thin;
border-inline-width: thin thick;
border-inline-width: 5px 10px;border-inline-style: solid double;border-inline-color: #FFD700 green;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-width cho từng đường viền 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-inline-style: solid;border-inline-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-width cho từng đường viền trong CSS</h1>
<span>Dùng để quy định chiều rộng đường viền trái ở vị trí 1 và chiều rộng đường viền phải ở vị trí 2, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho đường viền:</span>
<div style="border-inline-width: 5px 1px;">border-inline-width: 5px 1px;</div>
<div style="border-inline-width: 5px 10px;border-inline-style: solid double;border-inline-color: #FFD700 green;">border-inline-width: 5px 10px;border-inline-style: solid double;border-inline-color: #FFD700 green;</div>
<div style="border-inline-width: 1px 5px;">border-inline-width: 1px 5px;</div>
<div style="border-inline-width: thin 5px;">border-inline-width: thin 5px;</div>
<div style="border-inline-width: thick thin;">border-inline-width: thick thin;</div>
<div style="border-inline-width: thin thick;">border-inline-width: thin thick;</div>
</body>
</html>
Cách sử dụng border-inline-width hiệu quả trong CSS
border-inline-width phát huy tác dụng tốt khi cần kiểm soát độ dày của hai đường viền nằm ở đầu và cuối trục inline. Thay vì gắn cố định với trái và phải, thuộc tính này thích ứng với hướng viết của phần tử, giúp CSS linh hoạt hơn khi xây dựng giao diện đa ngôn ngữ.
Thiết lập độ rộng viền cho hai cạnh inline
Giá trị của border-inline-width được áp dụng cho hai cạnh inline của phần tử. Có thể đặt một giá trị để hai cạnh cùng độ dày hoặc dùng hai giá trị để thiết lập riêng cho từng cạnh.
.box {
border-inline-width: 2px 5px;
}
Trong ví dụ trên, cạnh inline-start có độ rộng 2px, còn cạnh inline-end có độ rộng 5px. Cách viết này phù hợp khi thiết kế cần tạo điểm nhấn không đồng đều giữa hai phía của một thành phần.
Kết hợp border-inline-width với border-style và border-color
Thiết lập độ rộng không tự tạo ra đường viền hiển thị nếu phần tử chưa có kiểu viền. Vì vậy, border-inline-width thường được dùng cùng border-inline-style và border-inline-color để kiểm soát đầy đủ phần viền theo trục inline.
.box {
border-inline-width: 1px 3px;
border-inline-style: solid;
border-inline-color: #333;
}
Cách kết hợp này giúp tách riêng việc điều chỉnh độ dày, kiểu dáng và màu sắc, từ đó dễ thay đổi giao diện mà không phải viết lại toàn bộ quy tắc viền.
Sử dụng border-inline-width trong bố cục hỗ trợ nhiều hướng viết
Điểm đáng chú ý của border-inline-width là nó hoạt động theo trục inline thay vì cố định theo cạnh trái hoặc phải. Khi hướng viết thay đổi, vị trí thực tế của các cạnh inline cũng thay đổi theo.
.content {
border-inline-width: 0 4px;
border-inline-style: solid;
}
Nhờ đó, cùng một quy tắc CSS có thể được tái sử dụng trong các giao diện có hướng viết khác nhau. Đây là lựa chọn phù hợp khi xây dựng component dùng chung, đặc biệt với website có khả năng hỗ trợ nhiều ngôn ngữ hoặc cần thích ứng theo writing mode.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-inline-width 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 *
