Bùi Tấn Lực - 148
- 06/10/2025
Bùi Tấn Lực 
Thuộc tính border-inline-color trong CSS dùng để quy định đường viền trái và đường viền phải cùng một màu hoặc mỗi đường viền một màu 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-color trong CSS
Thuộc tính border-inline-color trong CSS dùng để quy định đường viền trái và đường viền phải cùng một màu hoặc mỗi đường viền một màu 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-width để quy định chiều rộng 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-color trong CSS
Thuộc tính border-inline-color 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 màu, 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-width để quy định chiều rộng cho đường viền:
border-inline-color: mausac;
mausac: Màu sắc của đường viền trái và đường viền phải, ví dụ: #ff0000, red,...
border-inline-color: red;
border-inline-color: red;border-inline-width: 5px 10px;border-inline-style: solid double;
border-inline-color: #0000FF;
border-inline-color: rgb(201, 76, 76);
border-inline-color: rgba(201, 76, 76, 0.3);
border-inline-color: hsl(89, 43%, 51%);
border-inline-color: hsla(89, 43%, 51%, 0.3);
border-inline-color: transparent;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-color 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-width: 5px;border-inline-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-color 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 màu, 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-width để quy định chiều rộng cho đường viền:</span>
<div style="border-inline-color: red;">border-inline-color: red;</div>
<div style="border-inline-color: red;border-inline-width: 5px 10px;border-inline-style: solid double;">border-inline-color: red;border-inline-width: 5px 10px;border-inline-style: solid double;</div>
<div style="border-inline-color: #0000FF;">border-inline-color: #0000FF;</div>
<div style="border-inline-color: rgb(201, 76, 76);">border-inline-color: rgb(201, 76, 76);</div>
<div style="border-inline-color: rgba(201, 76, 76, 0.3);">border-inline-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-inline-color: hsl(89, 43%, 51%);">border-inline-color: hsl(89, 43%, 51%);</div>
<div style="border-inline-color: hsla(89, 43%, 51%, 0.3);">border-inline-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-inline-color: transparent;">border-inline-color: transparent;</div>
</body>
</html>
Thuộc tính border-inline-color cho từng đường viền trong CSS
Dùng để quy định màu sắc đường viền trái ở vị trí 1 và màu sắc đườ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-width để quy định chiều rộng cho đường viền:
border-inline-color: mausac1 mausac2;
mausac1: Màu sắc của đường viền trái, ví dụ: #ff0000, red,...
mausac2: Màu sắc của đường viền phải, ví dụ: #ff0000, red,...
border-inline-color: red #0000FF;
border-inline-color: red #0000FF;border-inline-width: 5px 10px;border-inline-style: solid double;
border-inline-color: #FFD700 green;
border-inline-color: red green;
border-inline-color: rgb(201, 76, 76) green;
border-inline-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3);
border-inline-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%);
border-inline-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%);
border-inline-color: transparent hsl(89, 43%, 51%)
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính border-inline-color 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-width: 5px;border-inline-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Thuộc tính border-inline-color cho từng đường viền trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền trái ở vị trí 1 và màu sắc đườ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-width để quy định chiều rộng cho đường viền:</span>
<div style="border-inline-color: red #0000FF;">border-inline-color: red #0000FF;</div>
<div style="border-inline-color: red #0000FF;border-inline-width: 5px 10px;border-inline-style: solid double;">border-inline-color: red #0000FF;border-inline-width: 5px 10px;border-inline-style: solid double;</div>
<div style="border-inline-color: #FFD700 green;">border-inline-color: #FFD700 green;</div>
<div style="border-inline-color: red green;">border-inline-color: red green;</div>
<div style="border-inline-color: rgb(201, 76, 76) green">border-inline-color: rgb(201, 76, 76) green</div>
<div style="border-inline-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3)">border-inline-color: rgb(201, 76, 76) rgba(201, 76, 76, 0.3)</div>
<div style="border-inline-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%)">border-inline-color: rgba(201, 76, 76, 0.3) hsl(89, 43%, 51%)</div>
<div style="border-inline-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%)">border-inline-color: hsla(89, 43%, 51%, 0.3) hsl(89, 43%, 51%)</div>
<div style="border-inline-color: transparent hsl(89, 43%, 51%)">border-inline-color: transparent hsl(89, 43%, 51%)</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-color 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 *
