CSS border-top-style property

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

border-top-style property

CSS border-top-style property sets the style of the line of a box's top border.

Syntax:

border-top-style: style | inherit

Values

style: Style of the top border of a box. The following table shows the values :

value	Description
none	No style is set. The width of the border is zero.
hidden	No style is set. The width of the border is zero, except border of table elements (e.g. td, tr).
dotted	Border is a chain of dots.
dashed	Border is a chain of small dashes.
solid	The border is made up of a single line segment.
double	The border is made up of a two line segments. In this case, the width of the border is calculated by summing up the width of the lines and the space between two lines.
groove	As if the border is carved.
ridge	As if the border is coming out of the medium on which it is displayed.
inset	As if the box is embedded.
inset	As if the box is carved.

inherit: If set, the associated element takes computed value of its parent element's border-top-style property.

Initial value

Applies to

border-top-style property can be applied to all HTML elements.

Inherited

No.

Percentages

Not available.

Media

visual.

Computed value

As specified.

Browser compatibility

Browser	Version
Internet Explorer	4.0 and above
Firefox (Gecko)	1.0 and above
Opera	3.5 and above
Safari (WebKit)	1.0 and above

Example of border-top-style property

CSS code:

.w3r_none {
border-top-style: none;
}
.w3r_hiddent {
border-top-style: hidden;
}
.w3r_dotted {
border-top-style: dotted;
}
.w3r_dashed{
border-top-style: dashed;
}
.w3r_solid {
border-top-style: solid;
}
.w3r_double {
border-top-style: double;
}
.w3r_groove {
border-top-style: groove;
}
.w3r_ridge {
border-top-style: ridge;
}
.w3r_inset {
border-top-style: inset;
}
.w3r_outset {
border-top-style: outset;
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS border-top-style example - w3resource</title>
<link rel='stylesheet' href='border-top-style.css' type='text/css' />
</head>
<body>
<p  class="w3r_none">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_hidden">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_dotted">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_dashed">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_solid">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_double">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_groove">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_ridge">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_inset">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p  class="w3r_outset">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

View this example in a separate browser window

Example of border-top-style property.

Previous: CSS margin shorthand property
Next: CSS border-bottom-style property