Thuộc tính border-inline-style trong CSS
Bùi Tấn Lực - 869
- 06/10/2025
Chức năng của Thuộc tính border-inline-style trong CSS
Thuộc tính border-inline-style trong CSS dùng để quy định đường viền trái và đường viền phải cùng một kiểu hoặc mỗi đường viền một kiểu riêng, thuộc tính này kết hợp với thuộc tính border-inline-width để quy định chiều rộng 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-style trong CSS
Thuộc tính border-inline-style dùng 1 kiểu mẫu trong CSS
Dùng để quy định đường viền trái và đường viền phải cùng một kiểu, thuộc tính này kết hợp với thuộc tính border-inline-width để quy định chiều rộng và thuộc tính border-inline-color để quy định màu sắc cho đường viền:
border-inline-style: kieuduongvien;
kieuduongvien: Kiểu đường viền trái và đường viền phải ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
border-inline-style: solid;
border-inline-style: solid;border-inline-color: #FFD700 green;border-inline-width: 5px 10px;
border-inline-style: dotted;
border-inline-style: double;
border-inline-style: dashed;
border-inline-style: inset;
border-inline-style: outset;
border-inline-style: ridge;
border-inline-style: groove;
border-inline-style: none;
border-inline-style: hidden;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-style dùng 1 kiểu mẫu 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-width: 5px;border-inline-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-style dùng 1 kiểu mẫu trong CSS</h1>
<span>Dùng để quy định đường viền trái và đường viền phải cùng một kiểu, thuộc tính này kết hợp với thuộc tính border-inline-width để quy định chiều rộng và thuộc tính border-inline-color để quy định màu sắc cho đường viền:</span>
<div style="border-inline-style: solid;">border-inline-style: solid;</div>
<div style="border-inline-style: solid;border-inline-color: #FFD700 green;border-inline-width: 5px 10px;">border-inline-style: solid;border-inline-color: #FFD700 green;border-inline-width: 5px 10px;</div>
<div style="border-inline-style: dotted;">border-inline-style: dotted;</div>
<div style="border-inline-style: double;">border-inline-style: double;</div>
<div style="border-inline-style: dashed;">border-inline-style: dashed;</div>
<div style="border-inline-style: inset;">border-inline-style: inset;</div>
<div style="border-inline-style: outset;">border-inline-style: outset;</div>
<div style="border-inline-style: ridge;">border-inline-style: ridge;</div>
<div style="border-inline-style: groove;">border-inline-style: groove;</div>
<div style="border-inline-style: none;">border-inline-style: none;</div>
<div style="border-inline-style: hidden;">border-inline-style: hidden;</div>
</body>
</html>
Thuộc tính border-inline-style dùng 2 kiểu mẫu trong CSS
Dùng để quy định kiểu đường viền trái ở vị trí 1 và kiểu đườ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-width để quy định chiều rộng và thuộc tính border-inline-color để quy định màu sắc cho đường viền:
border-inline-style: kieuduongvien1 kieuduongvien2;
kieuduongvien1: Kiểu đường viền trái ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
kieuduongvien2: Kiểu đường viền phải ( solid, dotted, double, dashed, inset, outset, ridge, groove,... )
border-inline-style: solid dotted;border-inline-color: #FFD700 green;border-inline-width: 5px 10px;
border-inline-style: dotted solid;
border-inline-style: solid dotted;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-style dùng 2 kiểu mẫu 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-width: 5px;border-inline-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-style dùng 2 kiểu mẫu trong CSS</h1>
<span>Dùng để quy định kiểu đường viền trái ở vị trí 1 và kiểu đườ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-width để quy định chiều rộng và thuộc tính border-inline-color để quy định màu sắc cho đường viền:</span>
<div style="border-inline-style: solid dotted;">border-inline-style: solid dotted;</div>
<div style="border-inline-style: solid dotted;border-inline-color: #FFD700 green;border-inline-width: 5px 10px;">border-inline-style: solid dotted;border-inline-color: #FFD700 green;border-inline-width: 5px 10px;</div>
<div style="border-inline-style: dotted solid;">border-inline-style: dotted solid;</div>
<div style="border-inline-style: double solid;">border-inline-style: double solid;</div>
<div style="border-inline-style: dashed double;">border-inline-style: dashed double;</div>
<div style="border-inline-style: inset double;">border-inline-style: inset double;</div>
<div style="border-inline-style: outset inset;">border-inline-style: outset inset;</div>
<div style="border-inline-style: ridge outset;">border-inline-style: ridge outset;</div>
<div style="border-inline-style: groove ridge;">border-inline-style: groove ridge;</div>
<div style="border-inline-style: groove none;">border-inline-style: groove none;</div>
<div style="border-inline-style: hidden ridge;">border-inline-style: hidden ridge;</div>
</body>
</html>
border-inline-style kết hợp với các thuộc tính CSS khác
border-inline-style thường được sử dụng cùng các thuộc tính xác định độ rộng và màu sắc để tạo đường viền hoàn chỉnh ở hai cạnh inline. Cách kết hợp này giúp kiểm soát riêng từng thành phần của đường viền mà không cần viết nhiều quy tắc cho từng cạnh.
Kết hợp border-inline-style với border-inline-width
border-inline-width xác định độ dày của đường viền ở hai cạnh inline, trong khi border-inline-style quyết định kiểu hiển thị như nét liền, nét đứt hoặc chấm. Hai thuộc tính này thường đi cùng nhau khi cần tạo đường viền có độ dày và kiểu cụ thể.
.box {
border-inline-width: 2px;
border-inline-style: solid;
}
Cách viết trên tạo đường viền dạng nét liền với độ dày 2px ở hai cạnh inline. Khi thay đổi hướng viết hoặc chế độ bố cục, vị trí thực tế của đường viền sẽ được trình duyệt xác định theo hướng inline.
Kết hợp border-inline-style với border-inline-color
border-inline-color đảm nhiệm việc thiết lập màu sắc, còn border-inline-style xác định hình thức của đường viền. Kết hợp hai thuộc tính giúp tạo kiểu viền rõ ràng mà vẫn giữ được cách khai báo theo hướng inline.
.box {
border-inline-style: dashed;
border-inline-color: #333;
}
Trong ví dụ này, đường viền inline sử dụng kiểu nét đứt và màu được chỉ định riêng. Cách tách từng thuộc tính phù hợp khi giao diện cần thay đổi màu hoặc kiểu viền độc lập.
Kết hợp border-inline-style với border-inline
border-inline là thuộc tính viết tắt cho phép khai báo độ rộng, kiểu và màu của đường viền inline trong cùng một dòng. Trong khi đó, border-inline-style có thể được dùng riêng khi chỉ muốn thay đổi kiểu viền mà không tác động đến các giá trị còn lại.
.box {
border-inline: 1px solid #555;
border-inline-style: dotted;
}
Ở trường hợp này, kiểu đường viền được thiết lập lại thành dotted, còn độ rộng và màu vẫn có thể sử dụng các giá trị đã khai báo. Cách này hữu ích khi cần điều chỉnh một thành phần của kiểu viền sau khi đã sử dụng thuộc tính viết tắt.
Khi nào nên dùng border-inline-style thay cho border-style
Nên dùng border-inline-style khi yêu cầu thiết kế chỉ liên quan đến hai cạnh theo hướng inline. Cách viết này thể hiện rõ ý đồ bố cục và thích hợp với các giao diện cần hỗ trợ nhiều hướng viết hoặc thay đổi theo ngữ cảnh.
Ngược lại, border-style phù hợp khi cần thiết lập kiểu viền cho cả bốn cạnh cùng lúc hoặc muốn kiểm soát từng cạnh theo thứ tự cụ thể. Vì vậy, việc lựa chọn thuộc tính nên dựa trên phạm vi đường viền cần tác động thay vì chỉ dựa vào độ ngắn của cú pháp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-inline-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 *
