title: CSS Full Border top?
body: <p>my <code>div</code> has different <code>border-top</code> color than its <code>left</code> and <code>right</code> border.</p>
  
  <p>Example:</p>
  
  <pre><code>div{
      width: 100px; height: 100px;
      border-top: blue 20px solid;
      border-left: red 20px solid;
      border-right: red 20px solid;
  }
  </code></pre>
  
  <p>But the corner of the border become tringle-shaped as shown in left-image below:</p>
  
  <p><img src="https://i.stack.imgur.com/mgTCI.png" alt="CSS Border Problem"></p>
  
  <p>I want the <code>border-top</code> to span full width like the right-image above.</p>
  
  <p>Any trick to solve this?</p>
  
  <p>Thanks</p>