title: How can I add a border to the right side of this object?
body: <p>How can I add a border to the right side of this object to complete the square with the same properties as the border of the left. Adding box-shadow: 20px 0 0 0 red; does not work but overrides the left border.</p>
  
  <p><a href="https://jsfiddle.net/kheuz1z4/" rel="nofollow">https://jsfiddle.net/kheuz1z4/</a></p>
  
  <p>HTML 
      </p>
  
  <p>CSS </p>
  
  <pre><code>#borders {
    border-top: 20px solid black;
    box-shadow: -20px 0 0 0 red;
    border-bottom: 20px solid green;
    height: 150px;
    margin: 30px;
    width: 150px;
    border-radius: 20px 20px 0px 0px;
  }
  </code></pre>