border-top property

Definition and Usage

The border-top CSS property is a shorthand that sets the values of border-top-colorborder-top-style, and border-top-width. These properties describe the top border of elements.

  • Initialthe concatenation of the initial values of its longhand properties:
    • border-top-width: medium
    • border-top-style: none
    • border-top-color: currentColor
  • Applies toall elements
  • Inheritedno
  • Mediavisual
  • Computed Valueas each of the properties of the shorthand:
    • border-top-width: the absolute length or 0 if border-top-style is none or hidden
    • border-top-style: as specified
    • border-top-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
  • Animatableas each of the properties of the shorthand:
    • border-top-color: yes, as a color
    • border-top-style: no
    • border-top-width: yes, as a length
  • Canonical orderorder of appearance in the formal grammar of the values

Syntax

Formal syntax: <br-width> || <br-style> || <color>

Values

<br-width>
See border-top-width.
<br-style>
See border-top-style.
<color>
See border-top-color.

Examples

1 element {
2     border-top1px solid #000;
3 }

Compatibility

Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 4 3.5 1.0 (85)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) (Yes) (Yes) (Yes)