w3resource

CSS border-bottom-style property

border-bottom-style property

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

Syntax:

border-bottom-style: style | inherit

Values

style: Style of the bottom 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 it's parent element's border-bottom-style property.

Initial value

0

Applies to

border-bottom-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-bottom-style property

CSS code:

.w3r_none {
border-bottom-style: none;
}
.w3r_hiddent {
border-bottom-style: hidden;
}
.w3r_dotted {
border-bottom-style: dotted;
}
.w3r_dashed{
border-bottom-style: dashed;
}
.w3r_solid {
border-bottom-style: solid;
}
.w3r_double {
border-bottom-style: double;
}
.w3r_groove {
border-bottom-style: groove;
}
.w3r_ridge {
border-bottom-style: ridge;
}
.w3r_inset {
border-bottom-style: inset;
}
.w3r_outset {
border-bottom-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-bottom-style example - w3resource</title>
<link rel='stylesheet' href='border-bottom-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-bottom-style property.

Previous: CSS border-top-style property
Next: CSS border-left-style property



Follow us on Facebook and Twitter for latest update.