CSS border-top Property

The CSS border-top property sets the width, style, and color of the top border of an element in a single declaration. It is a shorthand that combines three longhand properties: border-top-width, border-top-style, and border-top-color.

This page covers the property's syntax, the meaning of each value, how omitted values are resolved, and practical examples you can run.

When to use it

Reach for border-top when you want a border on only the top edge of an element — for example, a divider above a footer, a top accent line on a card, or a rule between stacked list items. If you need the same border on all four sides, use the border shorthand instead; for full per-side control, use border-top, border-right, border-bottom, and border-left together.

Specifying the values

The three values can be given in any order, and you may omit one or two of them. Any value you leave out falls back to its initial value:

Style is required to see a border. The initial border-top-style is none, so if you omit the style, no border is rendered — even if you set a width and color.
If you omit the color, the border uses the element's color value (currentColor). When color is not set, it inherits or defaults to black.
If you omit the width, it falls back to medium (roughly 3px in most browsers).

Initial Value	medium none currentColor
Applies to	All elements. It also applies to ::first-letter.
Inherited	No
Animatable	Yes. The color and width of the border are animatable.
Version	CSS1
DOM Syntax	object.style.borderTop = "1px solid black";

Syntax

Syntax of CSS border-top Property

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

Example of the border-top property:

Example of CSS border-top Property with solid value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-top: 3px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top example</h2>
    <div> This is a simple example for the border-top property.</div>
  </body>
</html>

Try it Yourself »

Result

![CSS border-top Property](/uploads/media/default/0001/03/2f035228f6c0a9e922d16e119bd24dba1d27241b.png "CSS border-top Property" =420x)

Example of the border-top property applied to different elements:

Example of CSS border-top Property with dotted, solid and double values

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      p,
      div {
        padding: 10px;
      }
      h1 {
        border-top: 5px solid #8ebf42;
      }
      p {
        border-top: 4px dotted #1c87c9;
      }
      div {
        border-top: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>A heading with a solid green top border</h1>
    <p>A heading with a dotted blue top border.</p>
    <div>A div element with a thick double top border.</div>
  </body>
</html>

Try it Yourself »

You can create a box with the <div> element and set a background-color for your box and define the top border.

Example of using the border-top property to create a box with a ridge border:

Example of CSS border-top Property with ridge value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-top: 20px ridge #8ebf42;
        background-color: #ccc;
        height: 100px;
        width: 200px;
        font-weight: bold;
        text-align: center;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This box has a ridge border on the top.</p>
    </div>
  </body>
</html>

Try it Yourself »

Common gotchas

Nothing shows up? The most frequent mistake is omitting the style. border-top: 2px #1c87c9; renders nothing because the style defaults to none. Add a style keyword such as solid: border-top: 2px solid #1c87c9;.
Borders add to the element's size. A top border increases the rendered height unless box-sizing is set to border-box. Keep this in mind when aligning bordered and non-bordered elements.
Length keywords for width. Besides explicit lengths like 3px, the width accepts the keywords thin, medium, and thick. Their exact pixel values are browser-defined.

Values

border-top itself does not take named keyword values for the border parts directly — instead it accepts the values of its three longhand properties, plus the global initial and inherit keywords:

Value	Description
border-top-width	Sets the top border width of an element. The default value is "medium". Required value.
border-top-style	Sets the line style of the top border of an element. The default value is "none". Required value.
border-top-color	Sets the color of the top border of an element. The default value is the current color of the text.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Practice

What is the correct syntax to set a CSS property 'border-top'?

border-top: 10px solid red;border.top: 10px solid red;borderTop: 10px solid red;border-top = 10px solid red;