espacio entre bordes dobles [duplicado]

Question

Estoy tratando de agregar un borde doble usando, border: 10px double red;pero ¿cómo puedo controlar el grosor y el espaciado de los bordes? Quiero que el borde tenga un grosor de 1 px. Si solo cambio el borde a 1px, los bordes se superponen y solo se ve un borde. También probé con 1px de ancho de borde pero el mismo resultado.

También he intentado con la propiedad de espaciado de bordes, pero no pude hacer que funcione.

Aquí una captura de pantalla de lo que estoy tratando de lograr: https://share.getcloudapp.com/JrugmEG2

Jsfiddle de trabajo: 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

Puede usar box-shadowpara hacer la ilusión de dos bordes alrededor del elemento

.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>

Answer 2

Puedes considerar outline-offset

.box {
  margin:15px;
  width:200px;
  height:100px;
  border:1px solid red;
  outline:1px solid red;
  outline-offset:9px;
}

<div class="box"></div>

Answer 3

No creo que haya una forma incorporada de ajustar el espaciado en el borde doble, sin embargo, aquí hay una forma en la que puede ajustar el grosor de cada borde sólido en divs anidados.

.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;
}

.outer-box {
  background-color: white;
  border: 1px solid red;
  padding: 2%;
  outline: 5px solid #ffffff;
}

.middle-box {
  background-color: white;
  border: 1px solid red;
  padding: 4%;
  outline: 5px solid #ffffff;
}

.box {
  background-color: white;
  border: 1px solid red;
  padding: 4%;
  outline: 5px solid #ffffff;
}

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