title: How to change the color of the wrapper with the background of the bordering element, the border color
body: <p>I have code like this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
  }
  
  .wrapper {
    width: 300px;
    height: 300px;
    border: 3px solid red;
    display: flex;
    flex-wrap: wrap;
  }
  
  .wrapper&gt;div {
    min-width: calc(300px/3);
  }
  
  .child1 {
    background: blue;
  }
  
  div.child2 {
    background: green;
    min-width: calc(300px - 300px/3);
  }
  
  div.child3 {
    background: yellow;
    min-width: calc(300px - 300px/2);
  }
  
  div.child4 {
    background: purple;
    border: 4px gold dashed;
    box-sizing: border-box;
    min-width: calc(300px - 300px/2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="child1"&gt;
    &lt;/div&gt;
    &lt;div class="child2"&gt;
    &lt;/div&gt;
    &lt;div class="child3"&gt;
    &lt;/div&gt;
    &lt;div class="child4"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to override the flex container border of the flex child element with the border and background-color bordering the flex container. </p>
  
  <p>Also, when a dotted line such as dash is used for the border here, I want to show the border of the flex container transparent below the dotted line.</p>
  
  <p><a href="https://i.stack.imgur.com/n4pKH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n4pKH.png" alt="What I want to achieve image"></a></p>
  
  <p>I thought negative margin was the only way to do this, but it didn't work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
  }
  
  .wrapper {
    width: 300px;
    height: 300px;
    border: 3px solid red;
    display: flex;
    flex-wrap: wrap;
  }
  
  .wrapper&gt;div {
    min-width: calc(300px/3);
  }
  
  .child1 {
    background: blue;
      margin-left: -3px;
    margin-top: -3px;
  }
  
  div.child2 {
    background: green;
    min-width: calc(300px - 300px/3);
  }
  
  div.child3 {
    background: yellow;
    min-width: calc(300px - 300px/2);
  }
  
  div.child4 {
    background: purple;
    border: 4px gold dashed;
    box-sizing: border-box;
    min-width: calc(300px - 300px/2);
    margin-right: -3px;
    margin-bottom: -3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="child1"&gt;
    &lt;/div&gt;
    &lt;div class="child2"&gt;
    &lt;/div&gt;
    &lt;div class="child3"&gt;
    &lt;/div&gt;
    &lt;div class="child4"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I achieve this?</p>