CSS border-top Property

CSS border-top property specifies the element’s top border. It sets the width, style, and color of the top border in a single declaration.

This paragraph has a blue color top border.

The border-top property is a shorthand of the following three properties:

Example:

h1{
  border-top: 5px solid red;
}
h2{
  border-top: 5px dashed blue;
}
p{
  border-top: dotted; /* pass only required value */
}

If the color of the border is not specified, it will be same as element’s text color. See the example below:

Example:

h1{
  color: red; 
  border-top: solid; /* border color not specified */
}
h2{
  color: green;   
  border-top: dashed; /* border color not specified */
}

CSS Syntax

The border-top property has following syntax:

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

Property Values

The border-top property accepts following values:

border-top-widthSpecifies the width of the top border. The default value is medium.
border-top-styleSpecifies the style of the top border like ‘solid’, ‘dashed’, etc. Default value is solid.
border-top-colorSpecifies the color of the top border. Default value is the current color of the element.
initialSets the border-top property to its default value. Which is none.
inheritInherits the border-top property from the element’s parent.
noneThis is the default value. It Removes any existing top border(On setting border-top to none means setting border-top-style to none).

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.borderTop = “5px solid red”

Related Pages

CSS Tutorial: CSS Borders