How to apply CSS border-bottom-style | Examples

Example :

Set the style of the bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
p {border-style: solid;}

p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<body>

<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>

</body>
</html>

Definition and Usage  :

The border-bottom-style property sets the style of an element’s bottom border.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderBottomStyle=”dotted”

Property Values :

Value Description
none Specifies no border. This is default
hidden The same as “none”, except in border conflict resolution for table elements
dotted Specifies a dotted border
dashed Specifies a dashed border
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages :

CSS tutorial: CSS Border

CSS reference: border-bottom property

HTML DOM reference: borderBottomStyle property

 

One thought on “How to apply CSS border-bottom-style | Examples

  1. Pingback: How to apply CSS border-bottom-style | Examples | Hackers Third Eye

Comments are closed.