How to specify the double border using CSS ?
Last Updated :
23 Jul, 2025
Improve
The task is to specify the double border using CSS. In this article, we are going to use the border-style property to style the border. we have two common methods border-style property style and outline property in CSS.
Property used:
- border-style property: This property is used to set the style of an element's four borders.
Syntax:
border-style: value;
Approach:
- Create the HTML page with some elements.
- Now, using the border-style property style the border with value double.
Example: In this example, we are using the above-explained approach.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
h1.double {
border-width: 5px;
border-style: double;
Border-color: green
}
h1.double2 {
border-width: 10px;
border-style: double;
Border-color: green
}
h1.double3 {
border-width: 15px;
border-style: double;
Border-color: green
}
</style>
</head>
<body>
<h1 class="double">GeeksForGeeks</h1>
<h1 class="double2">GeeksForGeeks</h1>
<h1 class="double3">GeeksForGeeks</h1>
</body>
</html>
<html><head> <style type="text/css"> body { text-align: center; } h1.double { border-width: 5px; border-style: double; Border-color: green } h1.double2 { border-width: 10px; border-style: double; Border-color: green } h1.double3 { border-width: 15px; border-style: double; Border-color: green } </style></head><body> <h1 class="double">GeeksForGeeks</h1> <h1 class="double2">GeeksForGeeks</h1> <h1 class="double3">GeeksForGeeks</h1></body></html>Output:
Approach 2: Outline-property: The CSS outline property is used to set an outline around an element.
Syntax:
outline-style: value;
Example: here we are using the above method.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
.container {
width: 50%;
margin-left: 20px;
}
h1.double {
outline: 5px double red;
}
h1.double2 {
outline: 5px double green;
}
h1.double3 {
outline: 5px double orange;
}
</style>
</head>
<body>
<div class="container">
<h1 class="double">GeeksForGeeks</h1>
<h1 class="double2">GeeksForGeeks</h1>
<h1 class="double3">GeeksForGeeks</h1>
</div>
</body>
</html>
<html><head> <style type="text/css"> body { text-align: center; } .container { width: 50%; margin-left: 20px; } h1.double { outline: 5px double red; } h1.double2 { outline: 5px double green; } h1.double3 { outline: 5px double orange; } </style></head><body> <div class="container"> <h1 class="double">GeeksForGeeks</h1> <h1 class="double2">GeeksForGeeks</h1> <h1 class="double3">GeeksForGeeks</h1> </div></body></html>Output:
.png)
