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 a border between two lines with CSS
Use the border-style property with double value to set a border with two lines. The double border style creates two solid lines with a gap between them, making it useful for highlighting content or creating visual separation.
Syntax
border-style: double; border-width: thickness;
Example
<html>
<head>
<style>
.no-border {
border-width: 4px;
border-style: none;
padding: 10px;
margin: 10px 0;
}
.double-border {
border-width: 4px;
border-style: double;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="no-border">
This is a paragraph with no border.
</p>
<p class="double-border">
This is a paragraph with a double border (two solid lines).
</p>
</body>
</html>
Customizing Double Borders
<html>
<head>
<style>
.custom-double {
border: 6px double #ff6b6b;
padding: 15px;
margin: 10px 0;
background-color: #f8f9fa;
}
.thick-double {
border: 8px double #4ecdc4;
padding: 15px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="custom-double">
Red double border with background
</div>
<div class="thick-double">
Thick teal double border
</div>
</body>
</html>
Key Points
- Minimum border width of 3px is recommended for double borders to be visible
- The gap between the two lines is automatically calculated by the browser
- Double borders work on all four sides: top, right, bottom, left
- You can combine with colors and background for enhanced styling
Conclusion
The border-style: double property creates elegant two-line borders perfect for emphasizing content. Ensure adequate border width for optimal visibility and visual impact.
Updated on: 2026-03-15T23:18:59+05:30
350 Views
Advertisements