title: In bootstrap how to add borders to rows without adding up?
body: <p>I'm using bootstrap version 3.0.1 to make a grid and when I add a border to the rows of the grid I can see that the rows that are together add up there borders, I get a thicker border.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;My Test&lt;/title&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
  
      &lt;style type="text/css"&gt;
        body {
          padding-top: 20px;
          padding-bottom: 40px;
        }
  
        .container {
          width: 420px;
        }
  
        div.row {
          border: 1px solid;
        }
  
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
         &lt;div class="row heading"&gt;
          &lt;div class="col-md-12"&gt;Header&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row subheading"&gt;
          &lt;div class="col-md-12"&gt;Some text&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row footer"&gt;
          &lt;div class="col-md-12"&gt;Footer&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is what <a href="http://jsfiddle.net/7cb3Y/" rel="noreferrer">I get </a>.
  How can I use the border without the adjoining rows adding up their borders?, ie: I want all rows with a border of 1px.</p>
  
  <p>Thank you</p>