Neatly Inset Octagon in Parent Octagon

Question

I am attempting to inset an octagon with text in another octagon to simulate a border. However, as you can see from my code, the odd white corners of the smaller octagon are ruining things. Also, if I set the corners to have the same color as the larger octagon, I cannot have a thin border, which is my preference.

body {
  background-color: purple;
}
#octagon {
  width: 558px;
  background: red;
  position: relative;
  left: 10px;
  top: 260px;
  z-index: 1;
}
#octagon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid white;
  border-right: 29px solid white;
  width: 500px;
  height: 0;
}
#octagon:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid red;
  border-left: 29px solid white;
  border-right: 29px solid white;
  width: 500px;
  height: 0;
}
#octagon p {
  padding: 50px;
}
#octagonTwo {
  height: 264px;
  width: 578px;
  background: aquamarine;
  position: relative;
}
#octagonTwo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid aquamarine;
  border-left: 29px solid white;
  border-right: 29px solid white;
  width: 520px;
  height: 0;
}
#octagonTwo:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid aquamarine;
  border-left: 29px solid white;
  border-right: 29px solid white;
  width: 520px;
  height: 0;
}

<div id="octagon">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<div id="octagonTwo"></div>

Answer 1

Since you have a great padding in the inner p, we can use that and go for transparent corners :

(several dimensions need to be adjusted)

body {
  background-color: purple;
}
#octagon {
  width: 558px;
  background: red;
  position: relative;
  left: 10px;
  top: 20px;
  z-index: 1;
}
#octagon:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  width: 500px;
  height: 0;
}
#octagon:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-top: 29px solid red;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  width: 500px;
  height: 0;
}
#octagon p {
  padding: 21px 50px;
  margin-top: 46px;

}
#octagonTwo {
  height: 206px;
  width: 578px;
  background: aquamarine;
    position: absolute;
    top: 48px;
}
#octagonTwo:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  border-bottom: 25px solid aquamarine;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  width: 528px;
  height: 0;
}
#octagonTwo:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-top: 25px solid aquamarine;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  width: 528px;
  height: 0;
}

<div id="octagon">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<div id="octagonTwo"></div>