title: Remove border radius of List without overriding globally (Bootstrap 3)
body: <p>I am using Bootstrap 3 to create a small application. I need to use their <a href="http://getbootstrap.com/components/#list-group-linked">linked list</a> but do not want the rounded borders. </p>
  
  <p>From the CSS file, they use the following:</p>
  
  <pre><code>.list-group-item:first-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }
  
  .list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  </code></pre>
  
  <p>At the moment, i override the classes using the following:</p>
  
  <pre><code>.list-group-item:first-child {
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }
  
  .list-group-item:last-child {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
  </code></pre>
  
  <p>The problem with this is that this makes all lists I have render no borders. Is there a way to override for just this single instance that I use it?</p>
  
  <p>Here's an example from bootstrap on how to use this (<a href="http://getbootstrap.com/components/#list-group-linked">http://getbootstrap.com/components/#list-group-linked</a>):</p>
  
  <pre><code>&lt;div class="list-group"&gt;
    &lt;a href="#" class="list-group-item active"&gt;
      Cras justo odio
    &lt;/a&gt;
    &lt;a href="#" class="list-group-item"&gt;Dapibus ac facilisis in&lt;/a&gt;
    &lt;a href="#" class="list-group-item"&gt;Morbi leo risus&lt;/a&gt;
    &lt;a href="#" class="list-group-item"&gt;Porta ac consectetur ac&lt;/a&gt;
    &lt;a href="#" class="list-group-item"&gt;Vestibulum at eros&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>