border-top-color
The border-top-color property sets the color of the top border.
Formal Syntax
<color> | <image-1D>
JavaScript Access
// Access via element.style
element.style.borderTopColor = 'currentcolor';
Logical Property Group
This property belongs to the border-color logical property group, which includes:
- border-block-end-color
- border-block-start-color
- border-bottom-color
- border-inline-end-color
- border-inline-start-color
- border-left-color
- border-right-color
- border-top-color (current property)
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| border-top-color | 1 | 1 | 1 | 12 |
| currentColor | ≤31 | ≤50 | ≤9.1 | ≤15 |
| transparent | 1 | 1 | 1 | 12 |
Related Properties
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-start-end-radius
- border-start-start-radius
- border-style
- border-top
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- corner-block-end-shape 🧪
- corner-block-start-shape 🧪
- corner-bottom-left-shape 🧪
- corner-bottom-right-shape 🧪
- corner-bottom-shape 🧪
- corner-end-end-shape 🧪
- corner-end-start-shape 🧪
- corner-inline-end-shape 🧪
- corner-inline-start-shape 🧪
- corner-left-shape 🧪
- corner-right-shape 🧪
- corner-shape 🧪
- corner-start-end-shape 🧪
- corner-start-start-shape 🧪
- corner-top-left-shape 🧪
- corner-top-right-shape 🧪
- corner-top-shape 🧪
- border-block-clip 🚧
- border-block-end-clip 🚧
- border-block-end-radius 🚧
- border-block-start-clip 🚧
- border-block-start-radius 🚧
- border-bottom-clip 🚧
- border-bottom-radius 🚧
- border-boundary 🚧
- border-clip 🚧
- border-inline-clip 🚧
- border-inline-end-clip 🚧
- border-inline-end-radius 🚧
- border-inline-start-clip 🚧
- border-inline-start-radius 🚧
- border-left-clip 🚧
- border-left-radius 🚧
- border-limit 🚧
- border-right-clip 🚧
- border-right-radius 🚧
- border-shape 🚧
- border-top-clip 🚧
- border-top-radius 🚧
- corner 🚧
- corner-block-end 🚧
- corner-block-start 🚧
- corner-bottom 🚧
- corner-bottom-left 🚧
- corner-bottom-right 🚧
- corner-end-end 🚧
- corner-end-start 🚧
- corner-inline-end 🚧
- corner-inline-start 🚧
- corner-left 🚧
- corner-right 🚧
- corner-start-end 🚧
- corner-start-start 🚧
- corner-top 🚧
- corner-top-left 🚧
- corner-top-right 🚧