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
How to specify double border using CSS?
The CSS border-style property allows us to create various border effects, including double borders. A double border creates two parallel lines around an element, providing a distinctive visual effect that can enhance your web design.
Syntax
selector {
border-style: double;
border-width: value;
border-color: color;
}
Border Style Values
| Value | Description |
|---|---|
none |
No border |
solid |
Single solid line |
double |
Two parallel solid lines |
dashed |
Dashed line border |
dotted |
Dotted line border |
groove |
3D grooved border |
ridge |
3D ridged border |
Example: Basic Double Border
Here's how to create a simple double border
<!DOCTYPE html>
<html>
<head>
<style>
.double-border {
width: 300px;
height: 100px;
background-color: #f0f8ff;
border-style: double;
border-width: 5px;
border-color: #4169e1;
padding: 20px;
margin: 20px auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="double-border">Double Border Example</div>
</body>
</html>
A light blue box with two parallel blue border lines appears, containing centered text "Double Border Example".
Example: Varying Border Widths
The thickness of the border affects how the double border appears
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
justify-content: center;
margin: 20px;
}
.box {
width: 150px;
height: 80px;
background-color: #fffacd;
border-style: double;
border-color: #8b4513;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 12px;
}
.thin { border-width: 3px; }
.medium { border-width: 8px; }
.thick { border-width: 15px; }
</style>
</head>
<body>
<div class="container">
<div class="box thin">3px Double</div>
<div class="box medium">8px Double</div>
<div class="box thick">15px Double</div>
</div>
</body>
</html>
Three boxes displayed side by side, each with double borders of increasing thickness (3px, 8px, and 15px), showing how the gap between the two lines increases with border width.
Example: Different Sides
You can apply double borders to specific sides only
<!DOCTYPE html>
<html>
<head>
<style>
.selective-border {
width: 250px;
height: 120px;
background-color: #e6ffe6;
border-top: 6px double #228b22;
border-bottom: 6px double #228b22;
padding: 20px;
margin: 20px auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="selective-border">Top & Bottom Double Borders</div>
</body>
</html>
A light green box with double borders only on the top and bottom edges, creating a horizontal frame effect around the centered text.
Key Points
- Double borders require sufficient width (at least 3px) to be visible
- The space between the two lines is automatically calculated by the browser
- Can be combined with other border properties like
border-radius - Works on all sides: top, right, bottom, left
Conclusion
The border-style: double property creates elegant double-line borders that add visual interest to elements. Combine it with appropriate width and color values to achieve the desired aesthetic effect for your web designs.
Updated on: 2026-03-15T16:11:47+05:30
869 Views
Advertisements