space between double borders

Question

I am trying to add a double border using border: 10px double red; but how can I control the thickness and spacing of the borders? I want the border to have a 1px thickness. If I just change border to 1px the borders are overlapping and retty much only one border visible. I also tried with border-width 1px but same result.

I've been trying with border-spacing property as well, but couldn't get it to work.

Here a screenshot of what I am trying to accomplish: https://share.getcloudapp.com/JrugmEG2

Working jsfiddle: https://jsfiddle.net/7Lw21z85/

HTML:

<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>

CSS:

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  border: 10px double red;
  padding: 8%;
  outline: 15px solid #ffffff;
}

Answer 1

You can use box-shadow for making illusion of two borders around the element

.container {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding: 8%;
background-color: black;
}

.heading {
  margin: 0;
  padding: 0;
  color: black;
}

p {
  margin: 0;
  padding: 0;
color: black;
}

.box {
  background-color: white;
  padding: 8%;
  box-shadow: 0 0 0 1px #B38D6A, 0 0 0 5px #fff, 0 0 0 6px #B38D6A, 0 0 0 11px #fff;
}

<div class="container">
   <span class="box">
      <h1 class="heading">
         Heading text
      </h1>
      <p>
         some text :)
      </p>
   </span>
</div>