CSS border-top Property


The border-top CSS property is used to define the top border of an element in a web page. It allows web developers to specify the width, style, and color of the border that appears on the top edge of an element, such as a div, paragraph, or heading. This property is part of the broader "border" property group and is often employed to create visual distinctions and design effects, such as dividing sections of a webpage or emphasizing particular content. By setting values for "border-top-width," "border-top-style," and "border-top-color," developers can customize the appearance of the top border to suit their design preferences. Individual properties are: border-top-color, border-top-style, and border-top-width.

Initial value
See individual properties
Applies to
All elements
Computed value
See individual properties
JavaScript syntax

Interactive Demo

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.


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



<div class="border">This is an example of the border-top property using a red solid border 3px in width.</div>
.border {
   border: 1px solid blue;
   border-top: 3px solid red;
   margin: 20px;
   padding: 20px;

Browser Support

The following table will show you the current browser support for the CSS border-top property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023