title: Removing border-radius in Bootstrap 4 | list-group-item
body: <p>I am new to bootstrap and have been over riding bootstrap border-radius property with my custom CSS class.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.border-radius-none{
      border-radius: 0;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Image:</p>
  
  <p><a href="https://i.stack.imgur.com/V3iog.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/V3iog.jpg" alt="enter image description here"></a></p>
  
  <p>This does work for all the cases but while over riding <code>list-group-item</code>, first and last element are not over ridden.</p>
  
  <ol>
  <li>My main css is linked below the bootstrap css.(As in below snippet)</li>
  <li>Read <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity" rel="noreferrer">article</a> on CSS specificity, which doesn't help me out.</li>
  </ol>
  
  <p><strong>Things I tried</strong></p>
  
  <ol>
  <li>Added <code>!important</code> to my css.</li>
  </ol>
  
  <p>Is there any other way to remove bootstrap border-radius default value, without using important ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
      crossorigin="anonymous"&gt;
  &lt;link href="./Main.css" rel="stylesheet"&gt;
  
  
  &lt;li class="list-group-item bg-black white-text border-none"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-9"&gt; Latest Jobs &lt;/div&gt;
          &lt;div class="col-3"&gt;
              &lt;a href="#" class="mr-auto"&gt;View all&lt;/a&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>