border-color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính viết tắt border-color trong CSS đặt màu cho đường viền của một phần tử.
Try it
border-color: red;
border-color: red #32a1ce;
border-color: red rgb(170 50 220 / 0.6) green;
border-color: red yellow green hsl(60 90% 50% / 0.8);
border-color: red yellow green transparent;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Thuộc tính thành phần
Thuộc tính này là dạng viết tắt của các thuộc tính CSS sau:
Cú pháp
css
/* Giá trị <color> */
border-color: red;
/* trên và dưới | trái và phải */
border-color: red #f015ca;
/* trên | trái và phải | dưới */
border-color: red rgb(240 30 50 / 70%) green;
/* trên | phải | dưới | trái */
border-color: red yellow green blue;
/* Giá trị toàn cục */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;
Thuộc tính border-color có thể được chỉ định với một, hai, ba hoặc bốn giá trị.
- Khi chỉ định một giá trị, màu đó áp dụng cho cả bốn cạnh.
- Khi chỉ định hai giá trị, màu đầu tiên áp dụng cho trên và dưới, màu thứ hai cho trái và phải.
- Khi chỉ định ba giá trị, màu đầu tiên áp dụng cho trên, màu thứ hai cho trái và phải, màu thứ ba cho dưới.
- Khi chỉ định bốn giá trị, các màu áp dụng cho trên, phải, dưới và trái theo thứ tự đó (theo chiều kim đồng hồ).
Giá trị
<color>-
Xác định màu của đường viền.
Mô tả
Mỗi cạnh có thể được đặt riêng lẻ bằng border-top-color, border-right-color, border-bottom-color và border-left-color; hoặc sử dụng các thuộc tính nhận biết chế độ viết: border-block-start-color, border-block-end-color, border-inline-start-color và border-inline-end-color.
Bạn có thể tìm hiểu thêm về màu sắc đường viền trong Áp dụng màu sắc cho các phần tử HTML.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements. It also applies to ::first-letter. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand: |
Cú pháp hình thức
border-color =
[ <color> | <image-1D> ]{1,4}
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
Ví dụ
Sử dụng border-color đầy đủ
HTML
html
<div id="justone">
<p><code>border-color: red;</code> is equivalent to</p>
<ul>
<li><code>border-top-color: red;</code></li>
<li><code>border-right-color: red;</code></li>
<li><code>border-bottom-color: red;</code></li>
<li><code>border-left-color: red;</code></li>
</ul>
</div>
<div id="horzvert">
<p><code>border-color: gold red;</code> is equivalent to</p>
<ul>
<li><code>border-top-color: gold;</code></li>
<li><code>border-right-color: red;</code></li>
<li><code>border-bottom-color: gold;</code></li>
<li><code>border-left-color: red;</code></li>
</ul>
</div>
<div id="topvertbott">
<p><code>border-color: red cyan gold;</code> is equivalent to</p>
<ul>
<li><code>border-top-color: red;</code></li>
<li><code>border-right-color: cyan;</code></li>
<li><code>border-bottom-color: gold;</code></li>
<li><code>border-left-color: cyan;</code></li>
</ul>
</div>
<div id="trbl">
<p><code>border-color: red cyan black gold;</code> is equivalent to</p>
<ul>
<li><code>border-top-color: red;</code></li>
<li><code>border-right-color: cyan;</code></li>
<li><code>border-bottom-color: black;</code></li>
<li><code>border-left-color: gold;</code></li>
</ul>
</div>
CSS
css
#justone {
border-color: red;
}
#horzvert {
border-color: gold red;
}
#topvertbott {
border-color: red cyan gold;
}
#trbl {
border-color: red cyan black gold;
}
/* Set width and style for all divs */
div {
border: solid 0.3em;
width: auto;
margin: 0.5em;
padding: 0.5em;
}
ul {
margin: 0;
list-style: none;
}
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Logical Properties and Values Module Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |
Tương thích trình duyệt
Xem thêm
- Các thuộc tính CSS liên quan đến màu đường viền:
border,border-top-color,border-right-color,border-bottom-color,border-left-color, - Các thuộc tính CSS liên quan đến đường viền khác:
border-width,border-style - Kiểu dữ liệu
<color> - Các thuộc tính liên quan đến màu sắc khác:
color,background-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-colorvàcolumn-rule-color - Áp dụng màu sắc cho các phần tử HTML bằng CSS