CSS Border Color

Màu sắc của đường viền

Thuộc tính border-color được sử dụng để thiết lập màu sắc của bốn đường viền.

Màu sắc có thể được thiết lập bởi:

1. tên màu - chỉ định một tên màu, như "red"
2. giá trị HEX - chỉ định một giá trị HEX, như "#ff0000"
3. giá trị RGB - chỉ định một giá trị RGB, như "rgb(255,0,0)"
4. giá trị HSL - chỉ định một giá trị HSL, như "hsl(0, 100%, 50%)"
5. giá trị transparent

Ghi chú: Nếu như thuộc tính border-color không được thiết lập, thì nó sẽ kế thừa màu sắc của phần tử.

Ví dụ sau sẽ thể hiện các màu sắc đường viền khác nhau:

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: dotted;
    border-color: blue;
}

Kết quả trả về:

Màu sắc của các cạnh bên cụ thể

Thuộc tính border-color có thể có từ một đến bốn giá trị (cho đường viền trên, đường viền bên phải, đường viền dưới, và đường viền bên trái). 

Ví dụ:

p.one {
    border-style: solid;
    border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Giá trị HEX 

Màu sắc của đường viền cũng có thể được chỉ định bằng cách sử dụng một giá trị thập lục phân (HEX):

Ví dụ:

p.one {
    border-style: solid;
    border-color: #ff0000; /* red */
}

Giá trị RGB

Hoặc bằng cách sử dụng giá trị RGB:

Ví dụ:

p.one {
    border-style: solid;
    border-color: rgb(255, 0, 0); /* red */
}

Giá trị HSL

Bạn cũng có thể sử dụng giá trị HSL: 

Ví dụ:

p.one {
    border-style: solid;
    border-color: hsl(0, 100%, 50%); /* red */
}

Bạn có thể tìm hiểu thêm về các giá trị HEX, RGB và HSL trong các chương CSS Colors của chúng tôi.