Thuộc tính border-color trong CSS
Bùi Tấn Lực - 874
- 06/10/2025
Chức năng của Thuộc tính border-color trong CSS
Thuộc tính border-color trong CSS dùng để quy định màu sắc đường viền của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-style để quy định kiểu đường viền và thuộc tính border-width để quy định chiều rộng cho đường viền.
Cú pháp của Thuộc tính border-color trong CSS
border-color: mausac;
mausac: Màu sắc của đường viền, ví dụ: #ff0000, red,...
Code Thuộc tính border-color trong CSS
border-color: red;
border-color: #0000FF;
border-color: rgb(201, 76, 76);
border-color: rgba(201, 76, 76, 0.3);
border-color: hsl(89, 43%, 51%);
border-color: hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-color 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-width: 5px;border-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-color trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-style để quy định kiểu đường viền và thuộc tính border-width để quy định chiều rộng cho đường viền:</span>
<div style="border-color: red;">border-color: red;</div>
<div style="border-color: #0000FF;">border-color: #0000FF;</div>
<div style="border-color: rgb(201, 76, 76);">border-color: rgb(201, 76, 76);</div>
<div style="border-color: rgba(201, 76, 76, 0.3);">border-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-color: hsl(89, 43%, 51%);">border-color: hsl(89, 43%, 51%);</div>
<div style="border-color: hsla(89, 43%, 51%, 0.3);">border-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-color: transparent;">border-color: transparent;</div>
</body>
</html>
Cách sử dụng border-color trong CSS
Thuộc tính border-color dùng để xác định màu cho đường viền của phần tử. Tùy vào số lượng giá trị được khai báo, bạn có thể áp dụng cùng một màu cho toàn bộ viền hoặc thiết lập màu riêng cho từng cạnh.
Thiết lập màu cho cả 4 cạnh bằng border-color
Khi chỉ khai báo một giá trị, border-color sẽ áp dụng màu đó cho cả bốn cạnh của phần tử. Cách này phù hợp khi đường viền cần đồng nhất về màu sắc.
.box {
border-style: solid;
border-width: 2px;
border-color: #333;
}
Trong ví dụ trên, cả cạnh trên, phải, dưới và trái đều sử dụng màu #333. Lưu ý, border-color chỉ xác định màu; để nhìn thấy đường viền, phần tử vẫn cần có border-style khác none và độ rộng phù hợp.
Thiết lập màu border-color cho từng cạnh
Bạn có thể sử dụng các thuộc tính border-top-color, border-right-color, border-bottom-color và border-left-color khi muốn kiểm soát màu của từng cạnh riêng biệt.
.box {
border-style: solid;
border-width: 2px;
border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: orange;
}
Cách này hữu ích khi mỗi cạnh cần thể hiện một trạng thái hoặc mục đích khác nhau. Chẳng hạn, bạn có thể dùng màu riêng cho từng cạnh của một khối thông tin mà không cần tạo thêm nhiều phần tử HTML.
Sử dụng nhiều giá trị với thuộc tính border-color
border-color hỗ trợ tối đa bốn giá trị và các giá trị được phân bổ theo thứ tự trên → phải → dưới → trái. Vì vậy, bạn có thể thiết lập màu cho từng cạnh ngay trong một khai báo.
.box {
border-style: solid;
border-width: 2px;
border-color: red blue green orange;
}
Với cách viết này, cạnh trên có màu đỏ, cạnh phải màu xanh dương, cạnh dưới màu xanh lá và cạnh trái màu cam. Nếu sử dụng hai giá trị, giá trị thứ nhất áp dụng cho cạnh trên và dưới, giá trị thứ hai áp dụng cho cạnh trái và phải.
Sử dụng mã màu, tên màu và RGB với border-color
Thuộc tính border-color chấp nhận nhiều cách biểu diễn màu hợp lệ trong CSS, chẳng hạn như tên màu, mã HEX, hàm rgb() hoặc rgba(). Bạn nên chọn cách khai báo phù hợp với hệ thống màu của website để dễ quản lý và duy trì giao diện.
.box {
border-style: solid;
border-width: 2px;
border-color: #2563eb;
}
.alert {
border-style: solid;
border-width: 1px;
border-color: rgb(220, 38, 38);
}
Trong đó, mã HEX phù hợp với các màu được xác định cố định, còn rgb() hoặc rgba() thuận tiện khi cần biểu diễn màu theo các thành phần RGB và độ trong suốt.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-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 *
