Hi there! As a CSS enthusiast, I want to share some clever techniques to create double borders on your web projects.
Double borders – where two parallel lines surround an element – are one of my favorite effects. They add visual prominence, help with content separation, and provide opportunities for creativity.
In this guide, we‘ll explore the anatomy of double borders and then dive into six different CSS methods to build them:
Anatomy of a Double Border
Before we look at the code, let‘s break down what comprises a double border:
It has three key aspects:
- Border 1 – The inner border line.
- Border 2 – The outer border line.
- Gap – The space between the two borders.
To create a double border in CSS, we essentially need to draw two borders and position them with a gap between.
The thickness of the lines and gap size can be customized to suit different designs.
Now let‘s look at how to code this effect with CSS!
Using the border-style Property
The simplest way to create a double border is by using border-style: double.
.box {
border: 15px double red;
}This draws two borders with an automatic gap between them.
We can control the border width and gap size by adjusting the border-width value. Wider borders create more space between the lines.
Benefits:
- Quick and easy to implement.
- Automatically handles spacing between borders.
- Supported by all major browsers.
Drawbacks:
- Limited customization of individual border sides.
- Can‘t use different colors per border.
Border-style double is great for fast and simple double borders. Next let‘s look at techniques with more customization options.
Using the linear-gradient() Function
CSS gradients provide an interesting approach to double borders.
The linear-gradient() function can generate gradient images we can apply to the different sides of an element.
Here‘s an example creating a 7px double border with a 1px gap:
.box {
border: 7px solid #057;
background:
linear-gradient(to top, #f00 7px, transparent 7px),
linear-gradient(to bottom, #f00 7px, transparent 7px),
linear-gradient(to left, #f00 7px, transparent 7px),
linear-gradient(to right, #f00 7px, transparent 7px);
}The transparent color creates the gap between the borders.
We can modify the pixel values to adjust border widths and gaps as needed.
Benefits:
- Highly customizable borders and gaps.
- Can use different colors per side.
- Gradients supported by all modern browsers.
Drawbacks:
- More complex than a single property.
- Requires CSS variables or calc() to avoid repetition.
Overall, linear-gradients give you fine-grained control over double border styles.
Using the outline Property
Another option is combining borders with outlines to double up lines.
Outlines draw outside an element‘s border, allowing us to layer the two:
.box {
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -10px;
}The negative outline-offset moves the outline behind the border, creating a gap.
Benefits:
- Allows different styles for border and outline.
- Outlines don‘t affect element sizing.
Drawbacks:
- Browser support for offsets is limited.
- Requires extra properties compared to border-style.
Used creatively, outlines can achieve some fun double border effects!
Using the box-shadow Property
The box-shadow property lets us draw shadow layers around elements.
By setting the blur and spread values to zero, we can create sharp shadow lines that mimic borders:
.box {
box-shadow:
0 0 0 5px red,
0 0 0 10px blue;
}This makes two 5px borders with a 5px gap between.
We can customize the widths, gap, colors and layer multiple shadows.
Benefits:
- Highly customizable with colors, blur etc.
- Allows multiple border layers.
- Wide browser support.
Drawbacks:
- Can require non-intuitive CSS.
- Performance impact with many layered shadows.
Overall, box-shadows provide extensive creative possibilities for complex double border effects.
Using the background-clip Property
The background-clip property controls how far a background extends within an element.
By clipping backgrounds to the content-box, we can layer borders on top:
.box {
border: 10px solid green;
padding: 10px;
background-color: pink;
background-clip: content-box;
}This provides a double border look by limiting backgrounds within the content area.
Benefits:
- Allows different colors for borders and backgrounds.
- Works on complex shaped elements.
Drawbacks:
- Browser support is inconsistent.
- Requires extra padding and layers.
With creative use of backgrounds, clips and borders, we can achieve double border effects.
Using Pseudo-Elements
CSS pseudo-elements (::before, ::after) allow us to insert content without extra HTML.
We can use them to add an extra border layer:
.box {
position: relative;
border: 10px solid blue;
}
.box::before {
/* Creates pseudo border */
content: "";
position: absolute;
border: 10px solid red;
/* Shrinks size to make gap */
top: -20px;
left: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
}This stacks a pseudo border outside the real one. We shift it and reduce the size to create a gap between them.
Benefits:
- Allows double border without extra HTML.
- Full control over sizing and gap.
Drawbacks:
- More complex CSS.
- Limited old browser support.
Pseudo-elements give us double borders while keeping HTML lean.
Browser Support
The double border techniques generally have excellent browser support:
- border-style: Supported by all browsers.
- linear-gradient: Supported by all modern browsers and IE10+.
- outline & outline-offset: IE8+ and all other major browsers.
- box-shadow: IE9+ and all modern browsers.
- background-clip: Patchy support in older IE and Opera.
- pseudo-elements: Supported by all major browsers except IE8 and below.
We can provide fallback single borders for older browsers using @supports queries:
.box {
border: 10px solid red;
}
@supports (box-shadow: 0 0 0 red) {
/* Double border styles */
}This gives a single border in older browsers, applying doubles only in modern ones supporting the techniques.
When to Use Double Borders
Double borders work well when you want elements to stand out. Some common use cases:
- Buttons – especially calls-to-action. The prominence can boost conversions.
- Navigation – easier navigation through high visibility. Useful for "You are here" indicators.
- Sections – clear visual separation between content blocks.
- Featured content – images, testimonials, promotions etc. Draws viewer attention.
- Admin interfaces – improves hierarchy of inputs, modules, widgets.
Avoid overusing double borders, as they will lose impact. Reserve them for key areas you want to accentuate.
SCSS Mixins for Reuse
We can wrap double border code into SCSS mixins for easy reuse:
// Double border with outline
@mixin double-outline($color1, $color2, $width: 2px) {
border: $width solid $color1;
outline: $width solid $color2;
outline-offset: -$width;
}
// Double border with box-shadow
@mixin double-shadow($color1, $color2, $width: 4px) {
box-shadow:
0 0 0 $width $color1,
0 0 0 ($width * 2) $color2;
}
// Usage:
.btn {
@include double-outline(blue, pink);
}
.card {
@include double-shadow(black, white);
}This allows creating consistent double borders while dynamically modifying colors, widths etc.
You can even build triple or dotted borders by customizing the mixins.
Inspiring Examples
Let‘s look at some inspiring real-world uses of double borders:
- Amazon uses a double border on their cart icon. It appears when hovering over the button, leading the eye and encouraging clicks.
- Mailchimp‘s call-to-action buttons have a bottom double border. It builds urgency to sign up.
- Codecademy highlights selected pricing plans with a double border. It guides users in choosing an option.
There are so many creative ways to leverage double borders on your projects!
Final Thoughts
I hope this guide provided some CSS techniques to add stylish double borders to your work. They can level up the polish, prominence and engagement of your web elements.
Let me know if you have any other approaches for double borders I missed! I‘d love to hear your innovative implementations.
Happy coding and designing!
