w3resource logo


CSS tutorials

CSS border-top-style property

Secondary Nav

Description

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

0

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.



Join our Question Answer community to learn and share your programming knowledge.