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
Usage of border-bottom-style property in CSS
The border-bottom-style property defines the style of an element's bottom border. It accepts various values like solid, dashed, dotted, and more to create different visual effects.
Syntax
border-bottom-style: value;
Available Values
The property accepts the following values:
- none - No border (default)
- solid - A solid line
- dashed - A dashed line
- dotted - A dotted line
- double - Two solid lines
- groove - A 3D grooved border
- ridge - A 3D ridged border
- inset - A 3D inset border
- outset - A 3D outset border
Example: Basic Usage
<!DOCTYPE html>
<html>
<head>
<style>
.dashed-border {
border-width: 4px;
border-bottom-style: dashed;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="dashed-border">
This paragraph has a dashed bottom border.
</p>
</body>
</html>
Example: Multiple Border Styles
<!DOCTYPE html>
<html>
<head>
<style>
.border-demo {
border-width: 3px;
border-color: #333;
padding: 15px;
margin: 10px 0;
}
.solid { border-bottom-style: solid; }
.dashed { border-bottom-style: dashed; }
.dotted { border-bottom-style: dotted; }
.double { border-bottom-style: double; }
.groove { border-bottom-style: groove; }
</style>
</head>
<body>
<div class="border-demo solid">Solid bottom border</div>
<div class="border-demo dashed">Dashed bottom border</div>
<div class="border-demo dotted">Dotted bottom border</div>
<div class="border-demo double">Double bottom border</div>
<div class="border-demo groove">Groove bottom border</div>
</body>
</html>
Key Points
- The border width must be set for the style to be visible
- Border color can be specified separately using
border-bottom-color - The property only affects the bottom border, not other sides
- 3D effects (groove, ridge, inset, outset) work better with thicker borders
Conclusion
The border-bottom-style property provides flexible styling options for bottom borders. Combine it with border-width and border-color for complete border control.
Updated on: 2026-03-15T23:18:59+05:30
197 Views
Advertisements