Thuộc tính border-inline-end-style 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-style trong CSS
Thuộc tính border-inline-end-style trong CSS dùng để quy định kiểu đường viền phải cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-inline-end-width để quy định chiều rộng 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-style trong CSS
border-inline-end-style: kieuduongvien;
kieuduongvien: Kiểu đường viền phải (solid, dotted, double, dashed, inset, outset, ridge, groove,... )
Code Thuộc tính border-inline-end-style trong CSS
border-inline-end-style: solid;
border-inline-end-style: dotted;
border-inline-end-style: double;
border-inline-end-style: dashed;
border-inline-end-style: inset;
border-inline-end-style: outset;
border-inline-end-style: ridge;
border-inline-end-style: groove;
border-inline-end-style: none;
border-inline-end-style: hidden;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-inline-end-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-inline-end-width: 5px;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-style trong CSS</h1>
<span>Dùng để quy định kiểu đường viền phải cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-inline-end-width để quy định chiều rộng 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-style: solid;">border-inline-end-style: solid;</div>
<div style="border-inline-end-style: dotted;">border-inline-end-style: dotted;</div>
<div style="border-inline-end-style: double;">border-inline-end-style: double;</div>
<div style="border-inline-end-style: dashed;">border-inline-end-style: dashed;</div>
<div style="border-inline-end-style: inset;">border-inline-end-style: inset;</div>
<div style="border-inline-end-style: outset;">border-inline-end-style: outset;</div>
<div style="border-inline-end-style: ridge;">border-inline-end-style: ridge;</div>
<div style="border-inline-end-style: groove;">border-inline-end-style: groove;</div>
<div style="border-inline-end-style: none;">border-inline-end-style: none;</div>
<div style="border-inline-end-style: hidden;">border-inline-end-style: hidden;</div>
</body>
</html>
Cách sử dụng border-inline-end-style hiệu quả trong CSS
border-inline-end-style phát huy hiệu quả nhất khi được sử dụng để kiểm soát kiểu đường viền ở cạnh cuối của trục inline. Thay vì cố định cạnh phải hoặc cạnh trái, thuộc tính này giúp giao diện thích ứng tốt hơn với hướng viết của nội dung.
Khi xây dựng giao diện có nhiều bố cục hoặc hỗ trợ ngôn ngữ khác nhau, nên ưu tiên thuộc tính logic như border-inline-end-style. Cách này giúp CSS linh hoạt hơn và hạn chế việc phải thay đổi từng cạnh viền thủ công.
Kết hợp border-inline-end-style với các thuộc tính border khác
border-inline-end-style chỉ quyết định kiểu hiển thị của đường viền. Để tạo một đường viền hoàn chỉnh, có thể kết hợp với border-inline-end-width và border-inline-end-color. Ba thuộc tính này lần lượt kiểm soát độ dày, kiểu đường nét và màu sắc.
Ví dụ, tạo một đường viền nét đứt ở cạnh inline-end:
.box {
border-inline-end-width: 2px;
border-inline-end-style: dashed;
border-inline-end-color: #333;
}
Nếu muốn CSS ngắn gọn hơn, có thể sử dụng thuộc tính border-inline-end để thiết lập nhiều giá trị trong cùng một khai báo:
.box {
border-inline-end: 2px dashed #333;
}
Cách kết hợp này phù hợp khi cần kiểm soát rõ từng thành phần của đường viền, trong khi cú pháp rút gọn giúp mã nguồn dễ đọc hơn ở những trường hợp đơn giản.
Thiết lập border-inline-end-style theo hướng viết của nội dung
Điểm đáng chú ý của border-inline-end-style là vị trí cạnh inline-end không nhất thiết luôn tương ứng với cạnh phải. Vị trí thực tế còn phụ thuộc vào hướng viết của phần tử.
Vì vậy, khi thiết kế giao diện hỗ trợ nhiều ngôn ngữ, không nên mặc định xem inline-end là bên phải. Sử dụng thuộc tính logic giúp đường viền tự điều chỉnh theo ngữ cảnh thay vì phải tạo các quy tắc CSS riêng cho từng hướng.
Chẳng hạn, có thể kết hợp với direction để kiểm soát hướng nội dung:
.box {
direction: rtl;
border-inline-end-style: solid;
}
Cách tiếp cận này đặc biệt hữu ích với giao diện đa ngôn ngữ, nơi cùng một thành phần có thể được hiển thị theo những hướng đọc khác nhau.
Những lỗi thường gặp khi sử dụng border-inline-end-style
Một lỗi phổ biến là chỉ thiết lập border-inline-end-style nhưng không có độ rộng đường viền phù hợp. Nếu chiều rộng viền đang bằng 0, kiểu đường viền có thể không tạo ra kết quả trực quan như mong muốn.
Một vấn đề khác là nhầm lẫn giữa inline-end và cạnh phải. Điều này dễ dẫn đến bố cục hiển thị sai khi thay đổi direction hoặc sử dụng writing-mode.
Ngoài ra, cần kiểm tra các quy tắc CSS khác có thể ghi đè lên thuộc tính này. Khi đường viền không xuất hiện hoặc không đúng kiểu mong muốn, nên kiểm tra lần lượt độ rộng, màu sắc, kiểu viền và hướng viết của phần tử.
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-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 *
