CSS border-top Property

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.