CSS Property - Border Top Width

Value: thin | medium | thick | <length>
Initial: 'medium'
Applies to: all elements
Inherited: no
Percentage values: N/A

This CSS property sets the width of an element's top border. The width of the keyword values are UA dependent

This property also applies to all of the following border width elements:

  • border-right-width
  • border-bottom-width
  • border-left-width

The border widths are constant throughout a document when specifically specified.

In both of the following examples we have added a border colour for demonstration purposes only.

In the example our "P" tags or elements will have the same top border width regardless of font size.

Example:

p{
border-top-width: 2px;
border-top-color: #DEDEDE;
}

This is The Result

The following example uses a relative sized border, by using the "em" tag you can set the border to a relative size so that if a user changes font sizes then the border size will also change in relation.

Example:

p{
border-top-width: 2em;
border-top-color: #DEDEDE;
}

This is The Result

Border widths cannot be negative.