CSS border-top Property

Example

Set the style of the top border for different elements:

h1 {
  border-top: 5px solid red;
}

h2 {
  border-top: 4px dotted blue;
}

div {
  border-top: double;
}

Definition and Usage

The border-top shorthand property sets all the top border properties in one declaration.

The properties that can be set must be in the following order:

  • border-top-width
  • border-top-style (required)
  • border-top-color

If border-top-color is omitted, the color applied will be the color of the text.

Default value: medium none color
Inherited: no
Animatable: yes, see individual properties.
Version: CSS1
JavaScript syntax: object.style.borderTop="3px dashed blue"

  • Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
  • object - object in javascript means the element on which border-top is applied.
  • Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property          
border-top 1.0 4.0 1.0 1.0 3.5

CSS Syntax

border-top: border-width border-style border-color|initial|inherit;

Property Values

Value Description Demo
border-top-width Required. Specifies the width of the top border. Default value is "medium"
border-top-style Required. Specifies the style of the top border. Default value is "none"
border-top-color Optional. Specifies the color of the top border. Default value is the color of the text
initial Sets this property to its default value.  
inherit Inherits this property from its parent element.

Comments