CSS: border-top-width property

This CSS tutorial explains how to use the CSS property called border-top-width with syntax and examples.

Description

The CSS border-top-width property defines the width of the top border of a box.

The syntax for the border-top-width CSS property is:

border-top-width: value;

value

The width of the top border of a box. It can be one of the following:

Value	Description
fixed	Fixed value expressed in px, em, ... div { border-top-width: 2px; }
thin	Thin border width, which might be 1px or 2px depending on the browser div { border-top-width: thin; }
medium	Medium border width, which might be 3px or 4px depending on the browser div { border-top-width: medium; }
thick	Thick border width, which might be 5px or 6px depending on the browser div { border-top-width: thick; }

Be sure to set the border-top-style property as well to make sure that your top border appears.
See also the border-top-color, border-top-style, and border-top properties.

The CSS border-top-width property has basic support with the following browsers:

We will discuss the border-top-width property below, exploring examples of how to use this property in CSS.

Let's look at an example where we set the top border to a fixed width.

div { border-top-width: 2px; border-top-style: solid; }

In this CSS border-top-style example, we have set the width of the top border to 2px. Be sure to apply a border-top-style so that the border appears.

Next, let's try using one of the width keywords (thin, medium, thick) to set our top border width.

div { border-top-width: thick; border-top-style: solid; }

In this border-top-style example, we have set the top border to a thick solid line.