Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Double box/border? Is this possible in CSS?

I'm trying to recreate this image in CSS.enter image description here

This is what I got from experimenting, so far. I used box-shadow to act as the second box. I'm not sure if there's a better way to do this?

h4 {
  font-family: sans-serif;
  text-transform: uppercase;
  text-align: center;
  border: solid 3px black;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  color: black;
  letter-spacing: 2px;
  padding: 20px 15px;
  background: white;
  box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000;
}
<h4>3. Scouting for a location</h4>

enter image description here

like image 306
Solus Avatar asked Jul 07 '17 20:07

Solus


People also ask

Can you have 2 borders CSS?

Introduction to CSS Multiple Borders. Multiple borders in CSS can be done by box-shadow property. Generally, we can get a single border with border property. Box-shadow property is not for multiple borders, but still, we are creating multiple borders with box-shadow property.

How do I add a double border to an image in CSS?

To change the border color, you can add the CSS color property. If you want to create a double border, you need to add the padding property to the style of your image.

How do you avoid double border in CSS?

Add a border-left and border-top to the parent. Add border-right and border-bottom to each of the children.


2 Answers

You can achieve this via absolutely position pseudo element. Also avoid property duplication via CSS inheritance.

.border {
  text-align: center;
  border: solid 3px black;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  color: black;
  letter-spacing: 2px;
  padding: 20px 15px;
  margin: 15px 15px;
  background: white;
  
  position: relative; /* new */
}

/* new */
.border:after {
  content: "";
  position: absolute;
  display: block;
  background: inherit;
  border-radius: inherit;
  border: inherit;
  left: 2px;
  top: 2px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
<div class="border">3. Scouting for a location</div>
like image 154
Vadim Ovchinnikov Avatar answered Oct 18 '22 02:10

Vadim Ovchinnikov


The concept behind using box-shadow is that two shadows, one white and one black, overlap to simulate a second black border. But the black shadow is only visible in the direction from which it is offset from the white shadow, so a gap is apparent between the original border and the black shadow (as shown in the OP's original post).

The "spread radius" of the black shadow could utilized to eliminate this gap (cleverly demonstrated by Nirav Joshi), but then the curvature of the corners is amplified and the two borders look different.

To duplicate the original border, I'd use ::after to generate an absolutely-positioned pseudo-element and use z-index to place it behind the original element. To further ensure that the border is duplicated exactly, I like Vadim Ovchinnikov's idea of inheriting the border color and radius from the original element.

.border {
  position: relative;
  text-align: center;
  border: solid 3px black;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  color: black;
  letter-spacing: 2px;
  padding: 20px 15px;
  margin: 15px 15px;
  background: white;
}

.border::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 3px;
  left: 3px;
  border: solid 3px black;
  border-radius: 5px;
  z-index: -1;
}
<h4 class="border">3. SCOUTING FOR A LOCATION</h4>
like image 43
showdev Avatar answered Oct 18 '22 01:10

showdev