Đường viền kiểu cách
Thí dụ
Thay đổi màu của bốn đường viền của phần tử <div> thành màu đỏ:
document.getElementById("myDiv").style.borderColor = "red";
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 tính borderColor đặt hoặc trả về màu của đường viền của một phần tử.
Thuộc tính này có thể nhận từ một đến bốn giá trị:
- Một giá trị, như: p {border-color: red} - cả bốn đường viền sẽ có màu đỏ
- Hai giá trị, như: p {border-color: red transparent} - viền trên và dưới sẽ có màu đỏ, viền trái và phải sẽ trong suốt
- Ba giá trị, chẳng hạn như: p {border-color: red green blue} - đường viền trên cùng sẽ có màu đỏ, đường viền bên trái và bên phải sẽ có màu xanh lá cây, đường viền dưới sẽ có màu xanh lam
- Bốn giá trị, chẳng hạn như: p {border-color: red green blue blue yellow} - đường viền trên sẽ là màu đỏ, đường viền bên phải sẽ là màu xanh lá cây, đường viền dưới sẽ là màu xanh lam, đường viền bên trái sẽ là màu vàng
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 | |||||
|---|---|---|---|---|---|
| borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Cú pháp
Trả về thuộc tính borderColor:
object.style.borderColor
Đặt thuộc tính borderColor:
object.style.borderColor = "color|transparent|initial|inherit"
Giá trị tài sản
| Value | Description |
|---|---|
| color | Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element |
| transparent | The color of the border is transparent (underlying content will shine through) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Chi tiết kỹ thuật
| Giá trị mặc định: | màu hiện tại |
|---|---|
| Giá trị trả lại: | Một chuỗi, đại diện cho màu của đường viền của một phần tử |
| Phiên bản CSS | CSS1 |
Các ví dụ khác
Thí dụ
Thay đổi màu của đường viền trên và dưới thành màu xanh lá cây và đường viền bên trái và bên phải thành màu tím, của phần tử <div>:
document.getElementById("myDiv").style.borderColor = "green purple";
Thí dụ
Trả lại màu viền của phần tử <div>:
alert(document.getElementById("myDiv").style.borderColor);
Các trang liên quan
Hướng dẫn CSS: Đường viền CSS
Tham chiếu CSS: thuộc tính border-color
Tham chiếu DOM HTML: thuộc tính đường viền