CSS border-top Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-top property controls the decorative and visual line that runs along the top edge of an element’s box. It occupies the space between the element’s padding and its margin in the CSS box model, is painted as part of the element’s border region, and is treated as a distinct edge from the left, right and bottom borders. Because it is a side-specific border, authors can style the top edge independently of the other edges to create asymmetrical outlines, separators, or visual emphasis across an element’s top boundary.

The property is conceptually composed of three aspects - thickness, appearance, and color - which are exposed as individual longhand properties such as border-top-width, border-top-style and border-top-color. It also participates in shorthands and aggregate constructs, for example as part of the overall border family that lets you set edges together. Because border-top is a discrete edge, it can be combined with different settings on other edges to produce borders that differ on each side of a box.

In layout terms, the presence and characteristics of the top border affect how the element’s total visual size is perceived. Whether the border contributes to the element’s used width and height depends on the box-sizing model in use - see box-sizing - and any border thickness consumes space between padding and margin. Borders are also painted in a specific stacking order relative to element background and content, and they can interact visually with other outline-like constructs such as the outline, which is drawn outside the border area and does not affect layout.

There are a few nuances when multiple elements meet or when special layout models are involved. In collapsed table models, for example, adjacent table cell edges can merge according to table-border rules rather than each cell keeping its independent top edge - see border-collapse. Corners where the top border meets a rounded edge are influenced by corner-radius settings; the way the top edge is clipped or joined at corners follows the behavior of border-radius. Understanding these interactions helps ensure the top border appears and behaves as intended across different layout scenarios.

Definition

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.borderTop

Interactive Demo

border-top: 3px solid red;

border-top: 2px dashed #1ECBE1;

border-top: 1rem dotted rgb(156, 234, 87);

border-top: thick solid rgba(123, 45, 87, .5);

border-top: solid;

border-top: dashed purple;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-top: <line-width> || <line-style> || <color>

Values

<line-width>See border-top-width CSS property for values.
<line-style>See border-top-style CSS property for values.
<color>See border-top-color CSS property for values.
inherit

Example

HTML

<div class="example">

  <h2>Border-top example</h2>

  <div class="card">

    <p>This card uses border-top to add a colored top border.</p>

  </div>

</div>

CSS

.example {
  font-family: "Helvetica Neue", Arial, sans-serif;
  padding: 24px;
  background: #ffffff;
}

.card {
  width: 360px;
  padding: 16px;
  background: #fbfdff;
  border-top: 6px solid #2c7be5;  /* border-top: width style color */
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-top property. Hover over a browser icon to see the version that first introduced support for this CSS property.