Thuộc tính border-inline-width trong CSS
Bùi Tấn Lực - 239
- 06/10/2025
Thuộc tính border-inline-width trong CSS dùng để quy định đường viền trái và đường viền phải cùng một chiều rộng hoặc mỗi đường viền một chiều rộng riêng, chi tiết như nào hãy cùng chúng tôi phân tích:
Chức năng của Thuộc tính border-inline-width trong CSS
Thuộc tính border-inline-width trong CSS dùng để quy định đường viền trái và đường viền phải cùng một chiều rộng hoặc mỗi đường viền một chiều rộng riêng, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền 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-width trong CSS
Thuộc tính border-inline-width cho 2 đường viền trong CSS
Dùng để quy định đường viền trái và đường viền phải cùng một chiều rộng, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho đường viền:
border-inline-width: chieurong;
chieurong: Chiều rộng của đường viền trái và đường viền phải, ví dụ 1px, 5px,...
border-inline-width: 5px;
border-inline-width: thin;
border-inline-width: thick;
border-inline-width: 5px;border-inline-style: solid double;border-inline-color: #FFD700 green;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-width cho 2 đường viền 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-style: solid;border-inline-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-width cho 2 đường viền trong CSS</h1>
<span>Dùng để quy định đường viền trái và đường viền phải cùng một chiều rộng, thuộc tính này kết hợp với thuộc tính border-inline-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho đường viền:</span>
<div style="border-inline-width: 5px;">border-inline-width: 5px;</div>
<div style="border-inline-width: 5px;border-inline-style: solid double;border-inline-color: #FFD700 green;">border-inline-width: 5px;border-inline-style: solid double;border-inline-color: #FFD700 green;</div>
<div style="border-inline-width: 1px;">border-inline-width: 1px;</div>
<div style="border-inline-width: thin;">border-inline-width: thin;</div>
<div style="border-inline-width: thick;">border-inline-width: thick;</div>
</body>
</html>
Thuộc tính border-inline-width cho từng đường viền trong CSS
Dùng để quy định chiều rộng đường viền trái ở vị trí 1 và chiều rộng đườ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-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho đường viền:
border-inline-width: chieurong1 chieurong2;
chieurong1: Chiều rộng của đường viền trái, ví dụ 1px, 5px,...
chieurong2: Chiều rộng của đường viền phải, ví dụ 1px, 5px,...
border-inline-width: 5px 1px;
border-inline-width: 1px 5px;
border-inline-width: thin 5px;
border-inline-width: thick thin;
border-inline-width: thin thick;
border-inline-width: 5px 10px;border-inline-style: solid double;border-inline-color: #FFD700 green;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-width cho từng đường viền 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-style: solid;border-inline-color: red;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-width cho từng đường viền trong CSS</h1>
<span>Dùng để quy định chiều rộng đường viền trái ở vị trí 1 và chiều rộng đườ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-style để quy định kiểu đường viền và thuộc tính border-inline-color để quy định màu sắc cho đường viền:</span>
<div style="border-inline-width: 5px 1px;">border-inline-width: 5px 1px;</div>
<div style="border-inline-width: 5px 10px;border-inline-style: solid double;border-inline-color: #FFD700 green;">border-inline-width: 5px 10px;border-inline-style: solid double;border-inline-color: #FFD700 green;</div>
<div style="border-inline-width: 1px 5px;">border-inline-width: 1px 5px;</div>
<div style="border-inline-width: thin 5px;">border-inline-width: thin 5px;</div>
<div style="border-inline-width: thick thin;">border-inline-width: thick thin;</div>
<div style="border-inline-width: thin thick;">border-inline-width: thin thick;</div>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-inline-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 *
