title: I have trying to make the border of my box to point toward the side of the screen. Any suggestion?
body: <p>Here the demo: <a href="https://codesandbox.io/s/stupefied-hoover-i8lqd" rel="nofollow noreferrer">https://codesandbox.io/s/stupefied-hoover-i8lqd</a></p>
  
  <p>In the demo, you can see that the borders of the <code>control_group</code> are pointing toward the center of the div, as in the following image:</p>
  
  <p><a href="https://i.stack.imgur.com/kvn4V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kvn4V.png" alt="enter image description here"></a></p>
  
  <p>In the <code>test_group</code>, I am trying to reverse the borders, as in the following image:</p>
  
  <p><a href="https://i.stack.imgur.com/EI3l0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EI3l0.png" alt="enter image description here"></a></p>
  
  <p>After reading some discussion, I have tried to use the before element in various way but I am still searching for the proper way to get the border pointing toward the side of the screen -in fact, in the reverse from the original's box-. </p>
  
  <p>How can I make the border to point toward the screen?</p>
  
  <p>here the ReactJS snippet:</p>
  
  <pre><code>import React from "react";
  import "./styles.css";
  
  export default function App() {
    return (
      &lt;div&gt;
        &lt;div className="control_group"&gt; 
          &lt;h2&gt;a superb reverse border&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div className="test_group"&gt; 
          &lt;h2&gt;a superb reverse border&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>here the CSS' snippet:</p>
  
  <pre><code>* {
    margin: 0;
    padding: 0;
  }
  
  /* control group */
  .control_group {
    background: cyan;
    height: 40vh;
    width: 70%;
    margin: auto;
    margin-top: 10vh;
    margin-bottom: 20vh;
    font-family: sans-serif;
    text-align: center;
  
    /* flexbox just for cosmetic */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .control_group {
    position: relative;
    z-index: 100;
    border-left: solid 1.5vw black;
    border-right: solid 1.5vw black;
    border-radius: 1.5%;
    border-left: solid;
    border-right: solid;
    border-radius: 10px;
    border-width: 15px;
  }
  
  /* test group */
  .test_group {
    position: relative;
    height: 40vh;
    width: 70%;
    margin: auto;
    margin-top: 10vh;
    margin-bottom: 20vh;
    font-family: sans-serif;
    text-align: center;
    background: yellow;
  
    /* flexbox just for cosmetic */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .test_group:before {
    content: "";
    width: 100%;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    z-index: 1000;
    border-left: solid 1.5vw black;
    border-right: solid 1.5vw black;
    border-radius: 1.5%;
  }
  </code></pre>