Thuộc tính màu đường viền CSS
Thí dụ
Đặt màu cho đường viền:
div {border-color: coral;}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc border-color
tính đặt màu cho bốn đường viền của một phần tử. Thuộc tính này có thể có từ một đến bốn giá trị.
Nếu thuộc tính màu viền có bốn giá trị:
- viền-màu: xanh đỏ xanh hồng;
- đường viền trên cùng màu đỏ
- đường viền bên phải màu xanh lá cây
- viền dưới màu xanh lam
- viền trái màu hồng
Nếu thuộc tính màu viền có ba giá trị:
- viền-màu: xanh đỏ xanh lam;
- đường viền trên cùng màu đỏ
- đường viền bên phải và bên trái có màu xanh lục
- viền dưới màu xanh lam
Nếu thuộc tính màu viền có hai giá trị:
- viền-màu: xanh đỏ;
- đường viền trên và dưới có màu đỏ
- đường viền bên phải và bên trái có màu xanh lục
Nếu thuộc tính màu viền có một giá trị:
- viền-màu: đỏ;
- cả bốn đường viền đều có màu đỏ
Lưu ý: Luôn khai báo thuộc tính kiểu đường viền trước thuộc border-color
tính. Một phần tử phải có đường viền trước khi bạn có thể thay đổi màu sắc.
Giá trị mặc định: | Màu hiện tại của phần tử |
---|---|
Thừa hưởng: | không |
Hoạt hình: | Đúng. Đọc về hoạt hình |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | object .style.borderColor = "# FF0000 blue" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
border-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Cú pháp CSS
border-color: color|transparent|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
color | Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element | |
transparent | Specifies that the border color should be transparent | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Đặt màu cho đường viền có giá trị HEX:
div {border-color: #92a8d1;}
Thí dụ
Đặt màu cho đường viền với giá trị RGB:
div {border-color: rgb(201, 76, 76);}
Thí dụ
Đặt màu cho đường viền với giá trị RGBA:
div {border-color: rgba(201, 76, 76, 0.3);}
Thí dụ
Đặt màu cho đường viền bằng giá trị HSL:
div {border-color: hsl(89, 43%, 51%);}
Thí dụ
Đặt màu cho đường viền có giá trị HSLA:
div {border-color: hsla(89, 43%, 51%, 0.3);}
Thí dụ
Đặt màu viền khác nhau cho mỗi mặt của phần tử:
div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color:
#ff0000 #00ff00 #0000ff rgb(250,0,255);}
Các trang liên quan
Hướng dẫn CSS: Đường viền CSS
Tham chiếu DOM HTML: thuộc tính borderColor