Home HTML CSS JavaScript jQuery ReactJS NodeJS About us Blogs Faqs

CSS border-top-style Property

The border-top style property is used to specify the top border's style.

Syntax

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

Example

​x
 
<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        border-top-style: dotted;
        border-top-color: #00ab55;
    }
</style>
</head>
<body>
​
<div class="ex1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
​
</body>
</html>
Preview

Property Values

Value Description
none No border is specified. This is the default setting.
hidden Except in border conflict resolution for table elements, this is the same as "none."
dotted A dotted border is specified.
dashed A dashed border is specified.
solid This option specifies a solid border.
double This option specifies a double border.
groove This option specifies a 3D grooved border. The effect is determined by the border-color value.
ridge This option specifies a 3D ridged border. The effect is determined by the border-color value.
inset This option specifies a 3D inset border. The effect is determined by the border-color value.
outset This property specifies a 3D outset border. The effect is determined by the border-color value.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Element Chrome Firefox Safari Edge / IE Opera
border-top-style 1.0 1.0 1.0 5.5 9.2