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

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#

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#