CSS border-top Property

❮ Prev Next ❯

The CSS border-top property sets the width, color and line style of the top border of elements. It is a shorthand property for specifying the values of border-top-width, border-top-style and border-top-color.

These three values of the shorthand property can be specified in any order, and one or two of them can be missed.

If there isn't a specified color, the value will be taken from the color property. If the color property is not defined, it will take the black color by default.

If the width is not specified, it will take the medium size of the element.

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";

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Syntax

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

Example of the border-top property:

<!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

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

<!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:

<!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 »

Values

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.