border-top-style#

#Introduction

The border-top-style CSS property sets the line style of an element's top border.

#Examples

css-apisrc/border-top-style/App.tsx

Code

Preview

#Syntax

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

#Values

• none Like the hidden keyword, displays no border.

• hidden Like the none keywork, displays no border.

• dotted Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side's border-width.

• dashed Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

• solid Displays a single, straight, solid line.

• double Displays two straight lines that add up to the pixel size defined by border-width.

• groove Displays a border with a carved appearance. It is the opposite of ridge.

• ridge Displays a border with an extruded appearance. It is the opposite of groove.

• inset Displays a border that makes the element appear embedded. It is the opposite of outset.

• outset Displays a border that makes the element appear embossed. It is the opposite of inset.

#Formal definition

#Formal syntax

<line-style>
where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

#Differences from web

• mdn:border-top-style

Global values are not supported (inherit, initial, revert, unset, etc).

When value is 'none' or 'hidden', the border-width value is not 0.

Default value is 'solid'.

#Compatibility