Thuộc tính border-color của CSS

định nghĩa và cách sử dụng

thuộc tính border-color thiết lập màu sắc của bốn cạnh viền. Thuộc tính này có thể thiết lập từ 1 đến 4 màu.

thuộc tính border-color là một thuộc tính viết tắt, có thể thiết lập màu sắc của phần nhìn thấy được của tất cả các cạnh của một phần tử, hoặc thiết lập màu sắc khác nhau cho bốn cạnh. Hãy xem ví dụ dưới đây:

ví dụ 1

border-color:red green blue pink;
  • Cạnh biên trên là màu đỏ
  • màu viền bên phải là xanh
  • Cạnh biên dưới là màu xanh nước biển
  • Cạnh biên trái là màu hồng

Ví dụ 2

border-color:red green blue;
  • Cạnh biên trên là màu đỏ
  • Cạnh biên phải và cạnh biên trái là màu xanh lá cây
  • Cạnh biên dưới là màu xanh nước biển

Ví dụ 3

border-color:dotted red green;
  • Cạnh biên trên và cạnh biên dưới là màu đỏ
  • Cạnh biên phải và cạnh biên trái là màu xanh lá cây

Ví dụ 4

border-color:red;
  • Tất cả 4 cạnh biên đều là màu đỏ

Nhớ rằng, phong cách cạnh biên không thể là none hoặc hidden, nếu không cạnh biên sẽ không xuất hiện.

Ghi chú：Luôn đặt thuộc tính border-style trước thuộc tính border-color. Element phải có cạnh biên trước khi bạn thay đổi màu.

Xem thêm:

Hướng dẫn CSS:Biên giới CSS

Hướng dẫn HTML DOM:Thuộc tính borderColor

Ví dụ

Thiết lập màu của 4 cạnh biên:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Thử ngay

Ngôn ngữ CSS

border-color: color|transparent|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
color_name Định nghĩa màu cạnh biên là tên màu (ví dụ: red).
hex_number Định nghĩa màu cạnh biên là giá trị hex (ví dụ: #ff0000).
rgb_number Định nghĩa màu cạnh biên là mã rgb (ví dụ: rgb(255,0,0)).
transparent Giá trị mặc định. Màu cạnh biên trong suốt.
inherit Định nghĩa rằng thuộc tính nên thừa kế màu cạnh biên từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: not specified
Thừa kế: no
Phiên bản: CSS1
Ngôn ngữ JavaScript: object.style.borderColor="#FF0000 blue"

Các ví dụ khác

Thiết lập màu của bốn cạnh biên
Ví dụ này minh họa cách thiết lập màu của bốn cạnh biên. Có thể thiết lập từ một đến bốn màu.

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Ghi chú：Trình duyệt Internet Explorer 6 (và các phiên bản trước) không hỗ trợ giá trị thuộc tính "transparent".

Ghi chú：Trình duyệt IE7 và các phiên bản trước không hỗ trợ giá trị "inherit". IE8 cần !DOCTYPE. IE9 hỗ trợ "inherit".