Thuộc tính CSS border-color cho phép định nghĩa màu viền của một phần tử. Nó giúp tăng tính thẩm mỹ cho trang web của bạn. Nó phối hợp với thuộc tính border để điều khiển giao diện viền. Bạn có thể dùng các giá trị màu như tên màu, mã hex hoặc giá trị RGB.
Bằng cách kết hợp màu viền với kiểu và độ rộng viền bạn sẽ tạo ra viền tùy chỉnh. Ví dụ dùng border-color: red green blue yellow áp dụng các màu khác nhau cho mỗi cạnh viền. Điều này giúp thêm nét sáng tạo cho thiết kế của bạn.
Syntax
border-color: color-value;
Multiple Sides Syntax
border-color: top-color right-color bottom-color left-color;
Default Value: Màu hiện tại của phần tử.
Property Values for border-color
Đây là các giá trị có thể dùng với thuộc tính border-color.
| Property Value | Description | Example |
|---|---|---|
| name | Chỉ định một tên màu. | "blue" |
| Hex | Chỉ định một giá trị hex. | "#0000ff" |
| RGB | Chỉ định một giá trị RGB. | "rgb(0, 0, 255)" |
| transparent | Đặt màu thành trong suốt. | "transparent" |
Bảng này trình bày các cách khác nhau để định nghĩa giá trị color trong CSS. Các cách này bao gồm từ tên màu đến hex.
Individual Border Color Properties
Thuộc tính border-color có thể được đặt riêng cho từng cạnh của phần tử. Điều này được thực hiện bằng các thuộc tính cụ thể sau.
| Property | Description |
|---|---|
CSS border-left-color Property | Xác định màu của viền bên trái. |
CSS border-top-color Property | Chỉ định màu của viền trên cùng. |
CSS border-right-color Property | Xác định màu của viền bên phải. |
CSS border-bottom-color Property | Áp dụng một màu cho viền dưới cùng. |
CSS border-block-color Property | Đặt màu viền cho các phần tử block-level logic trong một khai báo. |
CSS border-inline-color Property | Kiểm soát màu viền cho các phần tử inline-level logic trong một khai báo. |
Chúng ta sẽ hiểu từng giá trị thuộc tính thông qua các ví dụ.
Examples of Using border-color
. Set color-value by name:
Bạn có thể gán tất cả 140 tên màu CSS hợp lệ cho màu viền.
Syntax:
border-color: blue;
Example: Ví dụ này minh họa thuộc tính border-color bằng cách đặt màu dùng giá trị tên.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: blue;
}
p.two {
border-style: solid;
border-color: blue red yellow green;
}
p.three {
border-style: solid;
color: green;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
<p class="three">A solid inherited color border</p>
</body>
</html>
Output:
. Set Color Using Hex Value
Giá trị màu HEX có thể được gán cho màu viền. Cặp giá trị trong #rrggbb đại diện cho các giá trị RGB trong hệ thập lục phân.
Syntax:
border-color: #0000ff;
Example: Ví dụ này minh họa thuộc tính border-color bằng cách đặt màu dùng giá trị thập lục phân.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #0000ff #ff0000 #ffff00 #00ff00;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
</body>
</html>
Output:
. Set Color Using RGB Value
Giá trị màu RGB có thể được gán cho màu viền. Trong rgb(r, g, b) các giá trị r, g và b có thể thay đổi từ 0 đến 255 cho mỗi giá trị.
Syntax:
border-color: rgb(0, 0, 255);
Example: Ví dụ này minh họa thuộc tính border-color bằng cách đặt màu dùng giá trị RGB.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: rgb(0, 0, 255);
}
p.two {
border-style: solid;
border-color: rgb(0, 0, 255)
rgb(255, 0, 0)
rgb(255, 255, 0)
rgb(0, 255, 0);
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
</body>
</html>
Output:
. Set Color to Transparent
Giá trị transparent có thể được gán cho màu viền. Hiệu ứng của giá trị transparent không được quan sát. Nó cho phép màu nền xuyên qua nó.
Syntax:
border-color: transparent;
Example: Ví dụ này minh họa thuộc tính border-color bằng cách đặt màu dùng giá trị transparent.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: transparent;
}
</style>
</head>
<body>
<h1 align="center">GeeksforGeeks</h1>
<p class="one">A transparent border</p>
</body>
</html>
Output:
Notes:
Thuộc tính border-color có thể được xác định bằng cách sử dụng một, hai, ba hoặc bốn giá trị. Dưới đây là các cách dùng.
- Nếu một giá trị màu duy nhất được gán nó sẽ đặt nó cho tất cả các cạnh.
- Nếu hai giá trị màu được gán màu đầu tiên được đặt cho cạnh trên và dưới. Màu thứ hai sẽ được đặt cho các cạnh trái và phải.
- Nếu ba giá trị màu được gán màu đầu tiên được đặt cho cạnh trên cùng. Màu thứ hai cho bên trái và bên phải. Màu thứ ba được đặt cho cạnh dưới cùng.
- Nếu bốn giá trị màu được gán các màu được đặt cho trên cùng, bên phải, dưới cùng và bên trái. Nó tuân theo thứ tự theo chiều kim đồng hồ.
Supported Browsers
Thuộc tính border-color được hỗ trợ bởi tất cả các trình duyệt chính.
- Google Chrome: Phiên bản 1.0+
- Microsoft Edge: Phiên bản 12.0+
- Mozilla Firefox: Phiên bản 1.0+
- Opera: Phiên bản 3.5+
- Safari: Phiên bản 1.0+
Note: Các trình duyệt chính này hỗ trợ đầy đủ thuộc tính
background-colortrên nhiều phiên bản khác nhau. Điều này đảm bảo hiển thị nhất quán màu nền trên các trang web.