CSS border-top Property

Description

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

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;

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

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

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	14	1	1	4.4

Last updated by CSSPortal on: 31st December 2023