CSS border-top-style

The border-top-style property sets the top border style.

Possible values include solid, dashed, dotted, and others.

A border-style value is required for any border to display.



A dashed border-top-style.

A dashed border-top-style
  .border-dashed {
    padding: 10px;
    border-top-style: dashed;

<div class="border-dashed">
  A dashed border-top-style

Using border-top-style

The border-top-style specifies an element's top border style.

This property is required to add a top border to an element.

If no border-top-color is specified, the color will inherit from the text.

If no border-top-width is specified, the width will be medium width or 1px.


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



Value Description
none Default. No border
hidden Same as none except for table, it conflicts on the resolution
dotted Dotted border
dashed Dashed border
solid Solid border
double Double border
groove 3D groove border
ridge 3D ridge border
inset 3D inset border
outset 3D outset border
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-top-style value.

border-top-style: dotted
  .border-top-example {
    padding: 10px 0;
    border-color: firebrick;
    border-width: 3px;
    border-top-style: dotted;

<div class="border-top-example">
  border-top-style: dotted

Browser support

This table shows when border-top-style support started for each browser.

1.0 Dec 2008
1.0 Nov 2004
5.5 Jul 2000
9.2 Apr 2007
1.0 Jun 2003

You may also like

Last updated on Sep 30, 2023