Thuộc tính border-inline-end trong CSS
Bùi Tấn Lực - 862
- 06/10/2025
Chức năng của Thuộc tính border-inline-end trong CSS
Thuộc tính border-inline-end trong CSS dùng để kẻ đường viền phả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-end trong CSS
border-inline-end: chieurong kieuduongvien mausac;
chieurong: Chiều rộng của đường viền phải, ví dụ 1px, 5px,...
kieuduongvien: Kiểu đường viền phải ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
mausac: Màu sắc của đường viền phải, ví dụ: #ff0000, red,...
Code Thuộc tính border-inline-end trong CSS
border-inline-end: 5px solid green;
border-inline-end: 5px dotted green;
border-inline-end: 1px solid #ff0000;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-inline-end 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-end trong CSS</h1>
<span>Dùng để kẻ đường viền phả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-end: 1px solid #ff0000;">border-inline-end: 1px solid #ff0000;</div>
<div style="border-inline-end: 5px solid green;">border-inline-end: 5px solid green;</div>
<div style="border-inline-end: 5px dotted green;">border-inline-end: 5px dotted green;</div>
<div style="border-inline-end: 1px dotted red;">border-inline-end: 1px dotted red;</div>
<div style="border-inline-end: 5px double green;">border-inline-end: 5px double green;</div>
<div style="border-inline-end: 10px double red;">border-inline-end: 10px double red;</div>
<div style="border-inline-end: 5px dashed green;">border-inline-end: 5px dashed green;</div>
<div style="border-inline-end: 10px dashed red;">border-inline-end: 10px dashed red;</div>
<div style="border-inline-end: 1px inset red;">border-inline-end: 1px inset red;</div>
<div style="border-inline-end: 5px inset green;">border-inline-end: 5px inset green;</div>
<div style="border-inline-end: 10px inset red;">border-inline-end: 10px inset red;</div>
<div style="border-inline-end: 1px outset red;">border-inline-end: 1px outset red;</div>
<div style="border-inline-end: 5px outset green;">border-inline-end: 5px outset green;</div>
<div style="border-inline-end: 10px outset red;">border-inline-end: 10px outset red;</div>
<div style="border-inline-end: 1px ridge red;">border-inline-end: 1px ridge red;</div>
<div style="border-inline-end: 5px ridge green;">border-inline-end: 5px ridge green;</div>
<div style="border-inline-end: 1px groove red;">border-inline-end: 1px groove red;</div>
<div style="border-inline-end: 5px groove green;">border-inline-end: 5px groove green;</div>
</body>
</html>
Cách sử dụng border-inline-end trong các bố cục CSS thực tế
border-inline-end phù hợp khi đường viền cần bám theo cạnh kết thúc của vùng nội dung thay vì cố định vào bên trái hoặc bên phải. Cách viết này đặc biệt hữu ích khi giao diện phải thích ứng với hướng hiển thị khác nhau, giúp hạn chế việc phải thay đổi lại CSS theo từng ngôn ngữ.
Tạo đường viền cho phần tử theo hướng viết của nội dung
Thay vì chọn trực tiếp border-right hoặc border-left, có thể dùng border-inline-end để xác định cạnh kết thúc của trục nội tuyến. Khi hướng viết thay đổi, vị trí đường viền cũng được tính lại theo cách bố trí của nội dung.
Ví dụ, đoạn CSS sau tạo một đường phân cách ở cạnh kết thúc của phần tử:
.menu-item {
border-inline-end: 1px solid #ddd;
padding-inline-end: 16px;
}
Cách này thích hợp cho các mục menu, khu vực thông tin hoặc những thành phần cần có đường phân cách nhưng không muốn phụ thuộc cứng vào một phía màn hình.
Kết hợp border-inline-end với margin và padding
Đường viền và khoảng cách bên trong nên được cân đối để nội dung không bị ép sát vào cạnh. Có thể kết hợp border-inline-end với padding-inline-end, trong khi margin-inline-end tạo khoảng cách với phần tử kế bên.
.info {
border-inline-end: 2px solid #ccc;
padding-inline-end: 20px;
margin-inline-end: 20px;
}
Cách kết hợp này giúp bố cục rõ ràng hơn, đồng thời giữ cho khoảng cách giữa nội dung, đường viền và thành phần kế tiếp nhất quán khi hướng nội tuyến thay đổi.
Sử dụng border-inline-end trong giao diện hỗ trợ RTL
Với giao diện có thể chuyển giữa LTR và RTL, thuộc tính logic như border-inline-end giúp giảm số lượng quy tắc CSS phải viết riêng. Thay vì xác định cố định đường viền ở bên phải, trình duyệt dựa vào hướng nội tuyến để xác định cạnh kết thúc.
.sidebar {
border-inline-end: 1px solid #d9d9d9;
}
Nhờ đó, cùng một quy tắc có thể được tái sử dụng trong các bố cục có hướng văn bản khác nhau. Đây là ưu điểm đáng chú ý khi xây dựng website đa ngôn ngữ hoặc thiết kế giao diện cần khả năng thích ứng cao.
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 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 *
