CSS border-top Property

The border-top property adds a top border to an element.

Borders can vary in width, line style, and color.

Example

#

Three different border-top styles.

3px solid steelblue border
5px double lightblue border
3px dashed red border
<style>
  .mydiv {
    padding: 15px;
    margin: 15px 0;
  }
</style>

<div class="mydiv"
     style="border-top: 3px solid steelblue">
  3px solid steelblue border
</div>
<div class="mydiv"
     style="border-top: 5px double lightblue">
  5px double lightblue border
</div>
<div class="mydiv"
     style="border-top: 3px dashed red">
  3px dashed red border
</div>

Using border-top

The border-top property is a shorthand for:

If border-top-color is not set, it will inherit the text's color.

If border-top-width is not set, ti default to medium or 1px.

Syntax

border-top: border-width border-style border-color | 
            initial | inherit;

Values

#

Value Description
border-width Border width. Default is medium (1px).
border-style Border style. Default is none.
border-color Border color. Default will inherit text color.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when border-top 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