Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the style of the bottom border using CSS
The CSS border-bottom-style property is used to set the style of the bottom border of an element. You can create various visual effects like dotted, dashed, solid, and other border styles.
Syntax
selector {
border-bottom-style: value;
}
Possible Values
| Value | Description |
|---|---|
none |
No border (default) |
solid |
A solid line border |
dotted |
A series of dots |
dashed |
A series of dashes |
double |
Two solid lines |
inset |
Border appears embedded |
outset |
Border appears raised |
Example
The following example demonstrates different bottom border styles −
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 10px;
margin: 10px 0;
border-bottom-width: 3px;
border-bottom-color: #333;
}
.dotted { border-bottom-style: dotted; }
.double { border-bottom-style: double; }
.dashed { border-bottom-style: dashed; }
.solid { border-bottom-style: solid; }
.inset { border-bottom-style: inset; }
.outset { border-bottom-style: outset; }
</style>
</head>
<body>
<p class="dotted">Dotted bottom border.</p>
<p class="double">Double bottom border.</p>
<p class="dashed">Dashed bottom border.</p>
<p class="solid">Solid bottom border.</p>
<p class="inset">Inset bottom border.</p>
<p class="outset">Outset bottom border.</p>
</body>
</html>
Six paragraphs are displayed, each with a different bottom border style: - Dotted: A series of dots along the bottom - Double: Two parallel solid lines at the bottom - Dashed: A series of dashes along the bottom - Solid: A continuous straight line at the bottom - Inset: A border that appears embedded into the page - Outset: A border that appears raised from the page
Conclusion
The border-bottom-style property provides various styling options for bottom borders. Remember to also set border-bottom-width and border-bottom-color for the border to be visible.
Updated on: 2026-03-15T12:11:34+05:30
257 Views
Advertisements