Thuộc tính border-inline-end-width trong CSS
Bùi Tấn Lực - 849
- 06/10/2025
Chức năng của Thuộc tính border-inline-end-width trong CSS
Thuộc tính border-inline-end-width trong CSS dùng để quy định chiều rộng đường viền phải của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-inline-end-style để quy định kiểu đường viền và thuộc tính border-inline-end-color để quy định màu sắc cho đường viền.
Cú pháp của Thuộc tính border-inline-end-width trong CSS
border-inline-end-width: chieurong;
chieurong: Chiều rộng của đường viền phải, ví dụ 1px, 5px,...
Code Thuộc tính border-inline-end-width trong CSS
border-inline-end-width: 5px;
border-inline-end-width: thin;
border-inline-end-width: thick;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-inline-end-width 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-end-style: solid;border-inline-end-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-inline-end-width trong CSS</h1>
<span>Dùng để quy định chiều rộng đường viền phải của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-inline-end-style để quy định kiểu đường viền và thuộc tính border-inline-end-color để quy định màu sắc cho đường viền:</span>
<div style="border-inline-end-width: 5px;">border-inline-end-width: 5px;</div>
<div style="border-inline-end-width: 1px;">border-inline-end-width: 1px;</div>
<div style="border-inline-end-width: thin;">border-inline-end-width: thin;</div>
<div style="border-inline-end-width: thick;">border-inline-end-width: thick;</div>
</body>
</html>
Cách sử dụng border-inline-end-width hiệu quả trong CSS
border-inline-end-width phát huy hiệu quả nhất khi được sử dụng cùng các thuộc tính liên quan để kiểm soát đầy đủ đường viền ở phía cuối của trục inline. Cách này giúp CSS phù hợp với cả bố cục viết từ trái sang phải và từ phải sang trái, thay vì cố định theo hướng trái hoặc phải của màn hình.
Kết hợp border-inline-end-width với border-inline-end-style
border-inline-end-width chỉ xác định độ dày của đường viền, còn border-inline-end-style quyết định đường viền có được hiển thị hay không và hiển thị theo kiểu nào. Vì vậy, khi tạo một đường viền hoàn chỉnh, hai thuộc tính này thường được sử dụng cùng nhau.
.box {
border-inline-end-width: 3px;
border-inline-end-style: solid;
}
Cách kết hợp này giúp tách riêng việc thiết lập độ dày và kiểu đường viền, thuận tiện khi cần thay đổi giao diện ở từng trạng thái hoặc từng thành phần.
Kết hợp border-inline-end-width với border-inline-end-color
Nếu muốn kiểm soát đầy đủ diện mạo đường viền, có thể kết hợp border-inline-end-width với border-inline-end-color. Một thuộc tính quyết định độ dày, trong khi thuộc tính còn lại xác định màu sắc của đường viền.
.box {
border-inline-end-width: 2px;
border-inline-end-style: solid;
border-inline-end-color: #333;
}
Cách viết này đặc biệt hữu ích khi cần tạo đường phân cách ở cuối nội dung inline mà vẫn muốn giữ khả năng điều chỉnh từng thành phần riêng biệt.
So sánh border-inline-end-width với border-right-width
border-inline-end-width và border-right-width đều có thể thiết lập độ dày đường viền ở một phía, nhưng cách xác định vị trí của chúng khác nhau. border-right-width luôn hướng đến cạnh phải vật lý của phần tử, trong khi border-inline-end-width dựa trên hướng của trục inline.
Vì vậy, nếu giao diện chỉ sử dụng hướng viết thông thường từ trái sang phải, hai thuộc tính có thể cho kết quả tương tự trong nhiều trường hợp. Tuy nhiên, với giao diện hỗ trợ nhiều hướng viết, border-inline-end-width linh hoạt hơn vì vị trí đường viền có thể thay đổi theo hướng bố cục mà không cần viết lại CSS.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-inline-end-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 *
