Borders are crucial in web design/ development as they can draw attention to users or separate content in a web page. You can use the border shorthand when you want all four borders on an HTML element to be the same.
On the other hand, you can also use the border color, border style, and border-width longhand properties to make every border different/ unique. When you want to specify the border’s color, we use border color, use border width to determine the border’s width, and specify whether a border will be dashed, double, or solid using the border-style property.
You can also target individual borders using properties such as border-block-start and border-top
A double border is when two parallel lines surround an HTML element. The two lines are separated by a gap that can be left transparent or filled with an image or a background color.
For instance, we can have a sign-up/login button surrounded by a double border.
Why double border?
- Separation: You can use a double border to increase the readability and scannability of a web page by separating different HTML elements. For instance, you can have double borders to separate elements such as headers, body, and footers on a web page.
- Visual appeal: You can use different/contrasting colors on the double borders to make different elements more visually appealing.
- Show hierarchy: You can clearly distinguish between the important and less important elements on a web page using double borders.
- Ease customization: You can create personalized and unique designs with the help of double borders. For instance, you can change the color or width of each line.
- Emphasis: Using the double border property, you can draw attention to specific links or buttons on a web page.
You can use the following ways to create the double border in CSS.
Using border-style Property
The border-style property sets the style of the four borders of an element. We use the double keyword to set the style in this case. When we use the double keyword, automatic padding is created between the two borders.
For demonstration purposes, we will set the border width to 15px. We will also pick our border color to be red and indicate the border style as double.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2> Border Property</h2> </div>
</body>
</html>CSS code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}The output will be:
Using linear-gradient() function
This function sets a linear gradient as a background image. The result is a gradual transition between two colors along a straight line. We use the keyword to to mark the starting point of the gradient line. If the order is unspecified, the default value is to bottom.
The code below gives our box a 7px border width. We can then specify the linear gradient on the background property of each side of the box.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>linear-gradient() function</h2> </div>
</body>
</html>CSS code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}The output will be:
Using Outline Property
An outline is a line drawn outside the border of an element. This achieves the double border effect, and we can use an outline and a single border. We must use outline-offset to add a space between the border and outline properties.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Outline Property</h2> </div>
</body>
</html>CSS code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}The rendered page will appear as follows:
Using box-shadow Property
The box-shadow property adds a shadow effect around the frame of an element. You can have multiple box-shadow effects separated by commas. Start by ensuring that the offset and blur settings are zero, and then set the shadows to the proper sizes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Box Shadow Property</h2> </div>
</body>
</html>CSS code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}The rendered page will appear as follows:
Using background-clip Property
The background-clip Property determines how far the background should extend within an element. The extension can be on the border-box, padding-box, or content-box.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Background-Clip Property</h2> </div>
</body>
</html>CSS code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}The rendered page will appear as follows:
Using Pseudo Elements
Pseudo-elements, represented by ::before and ::after selectors allow web designers to style parts of an HTML document without adding markup to the code.
We can illustrate how to use pseudo-elements to create a double border using this code:
HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>pseudo property</h2> </div>
</body>
</html>CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}The rendered page will appear as follows:
Real-world examples of double-border CSS
The double border CSS property is used in many websites. You must combine double border property with other CSS properties to get the best out of it. The following are two examples of the double border in action;
The “Cart” button on Amazon
Amazon is one of the biggest names in the e-commerce space. Its cart button has a double border CSS for visual aesthetics and prompts users to act.
The double borders appear when a user hovers over the ‘cart’ button. The borders are also visible when you hover over Amazon’s navigation menu.
Mailchimp buttons
Mailchimp is an email marketing service that allows users to create, launch and track campaigns. Its website uses double border effects on various sections. The sign-up and login buttons have double borders to ‘create’ a sense of urgency as users browse through.
The border on the bottom side of these buttons thickens as a user passes a cursor through them.
Best practices when using double-border CSS effect
It is easy to get carried away when you are using double CSS. The end goal is to ensure that users navigate easily and emphasize the major areas on your site. Follow these best practices:
- Use a consistent style: If you use double borders, ensure the style is consistent on all elements. For instance, double borders can be used on the navigation, call-to-action, and sign-up/login buttons. If possible, ensure you have the same colors and margin thicknesses across elements with double borders.
- Ensure these double borders work on different devices: We live in a world where people browse websites from smartphones, PCs, and tablets. Test to ensure double borders are displayed as expected on various screen sizes.
- Use them sparingly: You may be tempted to overuse a certain CSS effect after discovering it for the first time. However, double CSS suits various elements on a web page. Only use this property in areas where it adds value to the design.
Conclusion
We have highlighted the major approaches you can use to create a double border in CSS. The choice of approach will depend on what you want to achieve with the double border and your preferences. You can decide to stick to one or a combination of several double-border styles on the same page.
You can check out these CSS resources to understand Cascading Style Sheets in detail.