CSS border-top-width Property

CSS border-top-width property is used to set the width of element’s top-border. CSS allows us to set border width using keywords like ‘thin’, ‘medium’, ‘thick’, or even using CSS length formats like ‘px’, ’em’, ‘rem’ etc.

See the paragraph below. It has a thick top border:

This paragraph has a medium thickness top border.

Try out the example below to check how it works:

Example:

p.medium{
  border-top-width: medium;
}
p.thin{
  border-top-width: thin;
}
p.thick{
  border-top-width: thick;
}
p.pixel{
  border-top-width: 5px;
}

Note: An element must have a border before applying the border-top-width property. Otherwise, this property will have no effect on the element.


CSS Syntax

The border-top-width property has the below syntax:

border-top-width: medium|thin|thick|length|initial|inherit;

Property Values

The border-top-width property accepts the following values:

mediumSpecifies a medium thickness top border. This is the default value.
thinSpecifies a thin top border.
thickSpecifies a thick top border.
lengthSpecifies the thickness of element’s top border in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
initialSets the border-top-width property to its default value(medium).
inheritInherits the border-top-width property from the parent element.

General Info

Default Valuemedium
InheritedNo
JavaScript Usageelement.style.borderTopWidth = “3px”

More Examples

Set the top border width using ‘rem’.

Example:

p{
  border-top-width: 0.3rem;
}

Set the top border width using ’em’.

Example:

p{
  border-top-width: 0.3em;
}

Related Pages

CSS Tutorial: CSS Borders