title: To remove CSS border with diagonal edges
body: <p>As you can see in the screenshot attached, I'm trying to remove the diagonal edges in the border. How can I go about it?</p>
  <p><strong>DEMO: <a href="https://jsfiddle.net/3cxn1pbs/" rel="nofollow noreferrer">https://jsfiddle.net/3cxn1pbs/</a></strong></p>
  <p><a href="https://i.stack.imgur.com/eqAAD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eqAAD.png" alt="enter image description here" /></a></p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row mt-2&quot;&gt;
  &lt;div class=&quot;col-3&quot;&gt;
  &lt;div class=&quot;nav flex-column nav-pills&quot; id=&quot;v-pills-tab&quot; role=&quot;tablist&quot; aria-orientation=&quot;vertical&quot;&gt;
    &lt;a class=&quot;nav-link active&quot; id=&quot;v-pills-home-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#v-pills-home&quot; role=&quot;tab&quot; aria-controls=&quot;v-pills-home&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;
    &lt;a class=&quot;nav-link&quot; id=&quot;v-pills-profile-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#v-pills-profile&quot; role=&quot;tab&quot; aria-controls=&quot;v-pills-profile&quot; aria-selected=&quot;false&quot;&gt;Profile&lt;/a&gt;
    &lt;a class=&quot;nav-link&quot; id=&quot;v-pills-messages-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#v-pills-messages&quot; role=&quot;tab&quot; aria-controls=&quot;v-pills-messages&quot; aria-selected=&quot;false&quot;&gt;About&lt;/a&gt;
    &lt;a class=&quot;nav-link&quot; id=&quot;v-pills-settings-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#v-pills-settings&quot; role=&quot;tab&quot; aria-controls=&quot;v-pills-settings&quot; aria-selected=&quot;false&quot;&gt;Settings&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-9&quot;&gt;
  &lt;div class=&quot;tab-content&quot; id=&quot;v-pills-tabContent&quot;&gt;
    &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;v-pills-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;v-pills-home-tab&quot;&gt;Yo&lt;/div&gt;
    &lt;div class=&quot;tab-pane fade&quot; id=&quot;v-pills-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;v-pills-profile-tab&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;tab-pane fade&quot; id=&quot;v-pills-messages&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;v-pills-messages-tab&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;tab-pane fade&quot; id=&quot;v-pills-settings&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;v-pills-settings-tab&quot;&gt;...&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.nav {
      border-radius: 4px;
      border: solid 1px #dddddd;
      background-color: #ffffff;
      height: 100%;
      min-height: calc(100vh - 200px);
  }
  .nav-pills .nav-link {
      border-radius: 0;
  }
  .nav-pills .nav-link.active, .nav-pills .show&gt;.nav-link {
    color: #333;
    background-color: #e6f8fd;
    border-right: 4px solid #00b0e6;
    border-radius: 0px;
    font-weight: 600;
  }
  .nav-link {
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    color: #333;
  }
  .nav.flex-column a:first-child, .nav.flex-column a:first-child:hover {
    border-top-right-radius: 3px !important;
    border-top-left-radius: 3px !important;
  }
  .nav-link:hover {
    color: #333;
    background-color: #e6f8fd;
    border-radius: 0px !important;
    border-right: 4px solid #00b0e6;
  }
  </code></pre>