CSS border-top-style Property

The border-top-style property in CSS is used to define the appearance of the top border of an element. It determines how the top border is rendered, such as solid, dotted, or dashed.

• It supports multiple styles like solid, dashed, dotted, double, etc.
• The border is only visible if a style other than none or hidden is applied.
• It is commonly used with border-top-width and border-top-color for complete styling.

Syntax:

border-top-style: none | dotted | dashed | solid | groove | inset | 
outset | ridge | double | hidden | initial | inherit;

Default Value: The default value is none.

Property Values

none: Removes the top border completely (default behavior).

border-top-style: none;

Example 1:

Output:

Dotted: It is used to make the top border with a series of dots.

border-top-style: dotted;

Example 2:

Output:

Dashed: It makes the top border with a series of short line segments.

border-top-style: dashed;

Example 3:

Output:

Solid: It is used to make the top border with a single solid line segment.

border-top-style: solid;

Example 4:

Output:

Groove: It makes the top border with a grooved line segment, which makes us feel that it is going inside. Syntax:

border-top-style: groove;

Example 5:

Output:

Inset: It makes the top border with an embedded line segment which makes us feel that it is fixed deeply on the screen.

border-top-style: inset;

Example 6:

Output:

Outset: It is the opposite of inset. It makes the top border with a line segment, which appears it to be coming out.

border-top-style: outset;

Example 7:

Output:

Ridge: It is the opposite of groove. It makes the top border with a ridged line segment, which makes us feel that it is coming out.

border-top-style: ridge;

Example 8:

Output:

Double: It makes the top border with a double solid line. The border width, in this case, is equal to the sum of widths of the two-line segments and the space between them.

border-top-style: double;

Example 9:

Output:

Hidden: It is used to make the top border invisible, like none, except in case of border conflict resolution of table elements.

border-top-style: hidden;

Example 10:

Output:

Initial: It is used to sets the default value of the element.

border-top-style: initial;

Example 11

Output:

Inherit: It makes the top-border-style property to be inherited from its parent element.

border-top-style: inherit;

Example 12

:

Output: