Thuộc tính border-top-color trong CSS
Bùi Tấn Lực - 840
- 06/10/2025
Chức năng của Thuộc tính border-top-color trong CSS
Thuộc tính border-top-color trong CSS dùng để quy định màu sắc đường viền trên của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-top-style để quy định kiểu đường viền và thuộc tính border-top-width để quy định chiều rộng cho đường viền.
Cú pháp của Thuộc tính border-top-color trong CSS
border-top-color: mausac;
mausac: Màu sắc của đường viền trên, ví dụ: #ff0000, red,...
Code Thuộc tính border-top-color trong CSS
border-top-color: red;
border-top-color: #0000FF;
border-top-color: rgb(201, 76, 76);
border-top-color: rgba(201, 76, 76, 0.3);
border-top-color: hsl(89, 43%, 51%);
border-top-color: hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-top-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-top-width: 5px;border-top-style: solid;}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-top-color trong CSS</h1>
<span>Dùng để quy định màu sắc đường viền trên của phần tử HTML, thuộc tính này kết hợp với thuộc tính border-top-style để quy định kiểu đường viền và thuộc tính border-top-width để quy định chiều rộng cho đường viền:</span>
<div style="border-top-color: red;">border-top-color: red;</div>
<div style="border-top-color: #0000FF;">border-top-color: #0000FF;</div>
<div style="border-top-color: rgb(201, 76, 76);">border-top-color: rgb(201, 76, 76);</div>
<div style="border-top-color: rgba(201, 76, 76, 0.3);">border-top-color: rgba(201, 76, 76, 0.3);</div>
<div style="border-top-color: hsl(89, 43%, 51%);">border-top-color: hsl(89, 43%, 51%);</div>
<div style="border-top-color: hsla(89, 43%, 51%, 0.3);">border-top-color: hsla(89, 43%, 51%, 0.3);</div>
<div style="border-top-color: transparent;">border-top-color: transparent;</div>
</body>
</html>
Cách sử dụng border-top-color hiệu quả trong CSS
border-top-color phát huy tác dụng tốt nhất khi được kết hợp đúng với kiểu và độ dày của đường viền. Ngoài ra, việc lựa chọn giá trị màu phù hợp cũng giúp tạo điểm nhấn mà không làm giao diện trở nên rối mắt.
Kết hợp border-top-color với border-top-style và border-top-width
Chỉ thiết lập border-top-color chưa đủ để tạo đường viền phía trên hiển thị rõ ràng. Bạn nên kết hợp thuộc tính này với border-top-style để xác định kiểu đường viền và border-top-width để thiết lập độ dày.
.box {
border-top-width: 3px;
border-top-style: solid;
border-top-color: #3498db;
}
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 trên, phù hợp khi cần tạo tiêu đề nổi bật, phân cách nội dung hoặc nhấn mạnh một khu vực trên giao diện.
Sử dụng border-top-color với các kiểu giá trị màu khác nhau
Thuộc tính border-top-color có thể nhận nhiều cách khai báo màu quen thuộc trong CSS như tên màu, mã HEX, RGB, RGBA hoặc HSL. Nhờ đó, bạn có thể chọn cách biểu diễn màu phù hợp với thiết kế của website.
.title {
border-top-style: solid;
border-top-width: 2px;
border-top-color: rgba(52, 152, 219, 0.6);
}
Trong đó, RGBA cho phép điều chỉnh thêm độ trong suốt của màu. Đây là lựa chọn hữu ích khi muốn đường viền có tính phân tách nhưng không quá nổi bật so với phần nội dung xung quanh.
Khi nào nên sử dụng border-top-color thay vì border-color
Nên dùng border-top-color khi chỉ muốn thay đổi màu của đường viền phía trên mà không ảnh hưởng đến ba cạnh còn lại. Cách này đặc biệt phù hợp với các thiết kế cần tạo điểm nhấn ở một cạnh cụ thể.
.card {
border: 1px solid #ddd;
border-top-color: #e74c3c;
}
Ngược lại, border-color phù hợp hơn khi muốn thiết lập màu cho toàn bộ bốn cạnh cùng lúc. Việc chọn đúng thuộc tính giúp CSS rõ ràng hơn và hạn chế phải khai báo những quy tắc không cần thiết.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-top-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 *
