CSS border-top-width Property

A border-top-width defines the width of the tpp border.

The width is set as a pixel value, or as thin, medium, or thick.

Example

#

A thin border-top-width.

An element with a thin top border
<style>
  .border-top-thin {
    padding: 20px;
    border-top-style: solid;
    border-top-color: tomato;
    border-top-width: thin;
  }
</style>

<div class="border-top-thin">
  An element with a thin top border
</div>

Using border-top-width

The default border-top-width is medium or 1 pixel.

A border-top-style value is required for a border to show.

Syntax

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

Values

#

Value Description
medium Default. Medium border
thin Thin border
thick Thick border
length Sets border thickness using CSS units
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-top-width values.

border-top-width: thick
<style>
  .border-top-example {
    padding: 20px;
    border-top-style: solid;
    border-top-color: tomato;
    border-top-width: thick;
  }
</style>

<div class="border-top-example">
  border-top-width: thick
</div>

Browser support

This table shows when border-top-width support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides