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:


  border-top: 5px solid red;
  border-top: 5px dashed blue;
  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:


  color: red; 
  border-top: solid; /* border color not specified */
  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
JavaScript Usageelement.style.borderTop = “5px solid red”

Related Pages

CSS Tutorial: CSS Borders