CSS border-top-style Property

CSS border-top-style property allows us to set the style of the element’s top border. For example, we can set a ‘solid’, ‘dashed’, ‘dotted’, etc. kind of border styles.

See the paragraph below. It has a dashed top border.

This paragraph has a dashed top border.

Example:

h1{
  border-top-style: dashed;
}
h2{
  border-top-style: dotted;
}

There are various types of border styles available in CSS. Try out the below example to have a look:

Example:

p.solid { border-top-style: solid; }
p.dashed { border-top-style: dashed; }
p.dotted { border-top-style: dotted; }
p.double { border-top-style: double; }
p.groove { border-top-style: groove; }
p.ridge { border-top-style: ridge; }
p.inset { border-top-style: inset; }
p.outset { border-top-style: outset; }
p.hidden { border-top-style: hidden; }
p.none { border-top-style: none; }

Output:

A solid border

A dashed border

A dotted border

A double border

A groove border

A ridge border

An inset border

An outset border

A hidden border

No border


CSS Syntax

The border-top-style property has the following syntax:

border-top-style: solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none|initial|inherit;

Property Values

The border-top-style property accepts following values:

solidSpecifies a solid border.
dashedSpecifies a dashed border.
dottedSpecifies a dotted border.
doubleSpecifies a double border.
grooveSpecifies a 3D grooved border.
ridgeSpecifies a 3D ridge border.
insetSpecifies a 3D inset border.
outsetSpecifies a 3D outset border.
hiddenHides the border.
noneSpecifies no border. This is the default value.
initialSets the border-top-style to its default value(none).
inheritInherits the border-top-style from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.borderTopStyle = “dashed”

Related Pages

CSS Tutorial: CSS Borders