border-bottom
The border-bottom property shorthand for all bottom border properties.
Formal Syntax
<line-width> || <line-style> || <color>
JavaScript Access
// Access via element.style
element.style.borderBottom = 'See individual properties';
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| border-bottom | 1 | 1 | 1 | 12 |
| currentColor | ≤31 | ≤50 | ≤9.1 | ≤15 |
| dashed | 1 | 1 | 1 | 12 |
| dotted | 1 | 1 | 1 | 12 |
| double | 1 | 1 | 1 | 12 |
| groove | 1 | 1 | 1 | 12 |
| hidden | 1 | 1 | 1 | 12 |
| inset | 1 | 1 | 1 | 12 |
| medium | 1 | 1 | 1 | 12 |
| none | 1 | 1 | 1 | 12 |
| outset | 1 | 1 | 1 | 12 |
| ridge | 1 | 1 | 1 | 12 |
| solid | 1 | 1 | 1 | 12 |
| thick | 1 | 1 | 1 | 12 |
| thin | 1 | 1 | 1 | 12 |
| 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-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-color
- 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 🚧