Thuộc tính border-inline-start-style trong CSS
Bùi Tấn Lực - 851
- 06/10/2025
Chức năng của Thuộc tính border-inline-start-style trong CSS
Thuộc tính border-inline-start-style trong CSS dùng để quy định kiểu đường viền trái cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-inline-start-width để quy định chiều rộng và thuộc tính border-inline-start-color để quy định màu sắc cho đường viền.
Cú pháp của Thuộc tính border-inline-start-style trong CSS
border-inline-start-style: kieuduongvien;
kieuduongvien: Kiểu đường viền trái ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
Code Thuộc tính border-inline-start-style trong CSS
border-inline-start-style: solid;
border-inline-start-style: dotted;
border-inline-start-style: double;
border-inline-start-style: dashed;
border-inline-start-style: inset;
border-inline-start-style: outset;
border-inline-start-style: ridge;
border-inline-start-style: groove;
border-inline-start-style: none;
border-inline-start-style: hidden;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-inline-start-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-start-width: 5px;border-inline-start-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-inline-start-style trong CSS</h1>
<span>Dùng để quy định kiểu đường viền trái cho phần tử HTML, thuộc tính này kết hợp với thuộc tính border-inline-start-width để quy định chiều rộng và thuộc tính border-inline-start-color để quy định màu sắc cho đường viền:</span>
<div style="border-inline-start-style: solid;">border-inline-start-style: solid;</div>
<div style="border-inline-start-style: dotted;">border-inline-start-style: dotted;</div>
<div style="border-inline-start-style: double;">border-inline-start-style: double;</div>
<div style="border-inline-start-style: dashed;">border-inline-start-style: dashed;</div>
<div style="border-inline-start-style: inset;">border-inline-start-style: inset;</div>
<div style="border-inline-start-style: outset;">border-inline-start-style: outset;</div>
<div style="border-inline-start-style: ridge;">border-inline-start-style: ridge;</div>
<div style="border-inline-start-style: groove;">border-inline-start-style: groove;</div>
<div style="border-inline-start-style: none;">border-inline-start-style: none;</div>
<div style="border-inline-start-style: hidden;">border-inline-start-style: hidden;</div>
</body>
</html>
Ứng dụng border-inline-start-style trong thiết kế giao diện
border-inline-start-style phù hợp khi muốn kiểm soát kiểu đường viền ở phía bắt đầu của trục nội tuyến mà không phải cố định theo cạnh trái hoặc phải. Cách tiếp cận này đặc biệt hữu ích với giao diện có nhiều hướng viết hoặc cần khả năng thích ứng tốt hơn khi bố cục thay đổi.
border-inline-start-style có thay đổi theo hướng viết của nội dung không?
Có. Vị trí mà border-inline-start-style tác động phụ thuộc vào writing-mode và hướng viết của phần tử. Vì vậy, không nên mặc định thuộc tính này luôn tương đương với đường viền bên trái.
Trong bố cục viết ngang thông thường, phía bắt đầu của trục nội tuyến thường nằm ở cạnh trái. Khi hướng viết hoặc cách tổ chức nội dung thay đổi, vị trí này cũng có thể thay đổi theo. Đây là ưu điểm quan trọng của nhóm thuộc tính CSS logic, giúp cùng một quy tắc có thể thích ứng với nhiều kiểu bố cục.
Ví dụ, có thể tạo một đường viền dạng nét đứt ở phía bắt đầu của nội dung:
<div style="border-inline-start-style: dashed;">
Nội dung có đường viền ở phía bắt đầu.
</div>
Cách viết này giúp mã CSS tập trung vào vai trò của cạnh thay vì phụ thuộc trực tiếp vào vị trí vật lý như trái hoặc phải.
Kết hợp border-inline-start-style với border-inline-start-width và border-inline-start-color
Thuộc tính border-inline-start-style chỉ xác định kiểu đường viền. Để tạo đường viền hoàn chỉnh, có thể kết hợp thêm border-inline-start-width để thiết lập độ dày và border-inline-start-color để xác định màu.
Ví dụ:
<div style="
border-inline-start-style: solid;
border-inline-start-width: 3px;
border-inline-start-color: #333;
">
Nội dung mẫu
</div>
Cách kết hợp này giúp kiểm soát riêng từng đặc điểm của đường viền, từ kiểu hiển thị, độ dày đến màu sắc. Khi xây dựng giao diện có nhiều thành phần, việc tách các thuộc tính cũng thuận tiện cho việc thay đổi thiết kế mà không ảnh hưởng đến những thiết lập khác.
Nếu cần khai báo ngắn gọn, có thể sử dụng thuộc tính border-inline-start để thiết lập nhiều thành phần của đường viền trong cùng một khai báo.
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-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 *
