0

How do I create the double border in the attached image?

The issue I am having is the second border, I cannot get to sit behind the 1st border. I cannot do this with z-index as this then puts the whole second border behind the section background. I also need to consider that there will be a hover effect on the border.

.style-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.style-wrapper article {
  flex: 1 0 26%;
  text-align: center;
}

.style-wrapper article .img-wrapper {
  border: 5px solid #aaaaaa;
  padding: 5px;
  background: white;
  position: relative;
}

.style-wrapper article .img-wrapper:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  bottom: -15px;
  right: -15px;
  background: white;
}
<section style="background:#e9e9e9">
  <div class="style-wrapper">
    <article>
      <a href="">
        <figure>
          <div class="img-wrapper">
            <img width="400" height="394" src="https://picsum.photos/200">
          </div>
          <figcaption>
            <h5>Sculpture</h5>
          </figcaption>
        </figure>
      </a>
    </article>
    <article>
      <a href="">
        <figure>
          <div class="img-wrapper">
            <img width="400" height="394" src="https://picsum.photos/200">
          </div>
          <figcaption>
            <h5>Sculpture</h5>
          </figcaption>
        </figure>
      </a>
    </article>
  </div>
</section>

.style-wrapper is the container for all the articles.

(The second border in this is black just for easy of developing this result)

Desired Result

cloned
  • 6,346
  • 4
  • 26
  • 38
IamOnStage
  • 193
  • 2
  • 13
  • Is your values `width: 400` and `height:394` are fixed? Or It can be changed? – Kiran Shinde Apr 09 '20 at 13:53
  • 1
    @Kenny Yes. But I have solved it with the double box shadow:box-shadow: 12px 12px 0 -6px white, 11px 11px 0 0px $greyMid; – IamOnStage Apr 09 '20 at 15:58
  • I did solve it by `position:absolute` but people have closed this question, so can't answer now it here – Kiran Shinde Apr 10 '20 at 06:37
  • @Kenny Is your solution substantively different to the [accepted answer](https://stackoverflow.com/a/44979312/2985643) for the linked duplicate [Double box/border? Is this possible in CSS?](https://stackoverflow.com/q/44979122/2985643) which also used `position: absolute;`? – skomisa Apr 13 '20 at 21:11

0 Answers0