Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-top-style

border-top-style

Specifies the style of the top border.

Sample Code

style.css

/* Solid line */
div.test { border-top-style: solid;}

/* Dashed line (larger gaps) */
div.test1 { border-top-style: dashed;}

/* Dotted line (smaller gaps) */
div.test2 { border-top-style: dotted;}

/* No border (default) */
div.test3 { border-top-style: none;}

/* Double line */
div.test4 { border-top-style: double;}

/* Carved-in look */
div.test5 { border-top-style: groove;}

/* Practical example: card top accent */
.card-top-accent {
	border-top-style: solid;
	border-top-width: 4px;
	border-top-color: #ff6600;
}

Available Values

Value	Description
none	No border is drawn. The width also becomes 0. This is the initial value.
solid	Draws a single solid line border.
dashed	Draws a dashed border with larger gaps.
dotted	Draws a dotted border with smaller gaps.
double	Draws a border with two lines.
groove	Draws a border that looks carved in. Opposite of 'ridge'.
ridge	Draws a border that looks raised. Opposite of 'groove'.
inset	Draws a border that looks embedded. Opposite of 'outset'.
outset	Draws a border that looks raised outward. Opposite of 'inset'.

Browser Preview

<div style="border-top-style: solid; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

Browser Support

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

9.2+ ○

8 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.

Overview

Specifies the style of the top border.

If no value is set for 'border-top-style', it defaults to 'none'. With 'none', the border width becomes 0 and no border is drawn. To display a top border, you must set 'border-top-style' to a value other than 'none'.

If you find any errors or copyright issues, please contact us.

Home