title: css "background-image" shows unwanted border, img "src" does not
body: <p>Getting started with Twitter Bootstrap, I ran into a strange problem of which I can't figure out the cause.</p>
  
  <p>When I render an image using:</p>
  
  <pre><code>&lt;img class="img-rounded" id="logo" /&gt;
  </code></pre>
  
  <p>and in CSS:</p>
  
  <pre><code>#logo {
      background-image: url(/Content/Images/logo.png);
  }
  </code></pre>
  
  <p>The image is shown with a narrow 'border':</p>
  
  <p><a href="https://i.stack.imgur.com/yyNVO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yyNVO.png" alt="Bordered"></a></p>
  
  <p>Even though I can't find anything remotely related to this effect. The corners are open because of the <code>img-rounded</code> class.</p>
  
  <p>Rendering the image using:</p>
  
  <pre><code>&lt;img class="img-rounded" id="logo" src="~/Content/Images/SO.png" /&gt;
  </code></pre>
  
  <p>Renders as expected:</p>
  
  <p><a href="https://i.stack.imgur.com/8C4wK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8C4wK.png" alt="NoBorder"></a></p>
  
  <p>How can I get rid of the border?
  CSS code I've tried without success:</p>
  
  <ul>
  <li><code>border: none;</code> </li>
  <li><code>color: blue;</code></li>
  <li><code>background-color: blue;</code></li>
  <li><code>border-style: none;</code></li>
  </ul>