CSS border-color: Màu viền

Thuộc tính CSS border-color được dùng để chỉ định màu viền cho các phần tử. Chúng ta cũng có thể đặt màu cho từng cạnh riêng lẻ bằng border-top-color, border-right-color, border-bottom-color, border-left-color.

Cú pháp

selector {
    border-color: /* value */;
}

Giá trị (1-4 values - shorthand)

Số giá trị	Cú pháp	Áp dụng
1	`border-color: red;`	4 cạnh cùng màu
2	`border-color: red blue;`	top/bottom \| left/right
3	`border-color: red blue green;`	top \| left/right \| bottom
4	`border-color: red blue green yellow;`	top \| right \| bottom \| left (theo chiều kim đồng hồ)

Ví dụ 1: Border-color 3 giá trị trên span, 2 giá trị trên div

<!DOCTYPE html>
<html>
<head>
<style>
span {
    margin: 10px; padding: 20px;
    border-style: solid;
    border-color: limegreen lightblue crimson; /* top | lr | bottom */
}
div {
    text-align: center;
    border-style: solid;
    border-color: palevioletred steelblue; /* tb | lr */
    height: 16px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>Demo</div>
<p><span>This</span>is demo text just for displaying how CSS styles works.</p>
</body>
</html>

Ví dụ 2: Border-bottom-color + Border-left-style

<!DOCTYPE html>
<html>
<head>
<style>
li {
    border-bottom-color: cyan;
    border-bottom-style: dotted;
    width: 300px;
    padding: 8px;
    list-style: none;
}
p {
    text-align: center;
    border-width: 8px;
    border-style: solid;
    border-color: #d11c74;
    border-left-style: ridge;
    padding: 1rem;
}
</style>
</head>
<body>
<h2>Accessories</h2>
<p>Displaying the car accessories</p>
<ul>
    <li>Mud Flap</li>
    <li>Car Freshener</li>
    <li>Mobile Holder</li>
    <li>Bluetooth</li>
    <li>Wheel Lock</li>
</ul>
</body>
</html>

Lưu ý quan trọng

border-color không hiển thị nếu border-style là none (mặc định) hoặc hidden
Luôn khai báo border-style (solid, dashed, dotted, ridge, v.v.) trước hoặc cùng lúc
Mặc định border-color = currentColor (màu text của phần tử)
Có thể dùng transparent để tạo viền vô hình nhưng vẫn chiếm diện tích

Shorthand: border

/* width style color */
border: 2px solid red;

/* Từng cạnh */
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double orange;

Logical Properties (Hiện đại, hỗ trợ RTL)

border-block-start-color: red;    /* top (LTR) / right (RTL vertical) */
border-block-end-color: blue;     /* bottom */
border-inline-start-color: green; /* left (LTR) / right (RTL) */
border-inline-end-color: yellow;  /* right (LTR) / left (RTL) */