title: How can I disable inherited css styles?
body: <p>So I am creating a container with rounded corners using the following method:</p>
  
  <pre><code>div.rounded {
      background: #CFFEB6 url('tr.gif') no-repeat top right;
  }
  div.rounded div {
      background: url('br.gif') no-repeat bottom right;
  }
  div.rounded div div {
      background: url('bl.gif') no-repeat bottom left;
  }
  div.rounded div div div {
      padding: 10px;
  }
  </code></pre>
  
  <p>Now I want to use a div inside my container:</p>
  
  <pre><code>.button {
      border: 1px solid #999;
       background:#eeeeee url('');
      text-align:center;
  }
  .button:hover {
      background-color:#c4e2f2;
  }
  
  &lt;div class='round'&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;
  &lt;div class='button'&gt;&lt;a href='#'&gt;Test&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>However, with I put a div inside my nested divs, the button has the bl image in the corner. </p>
  
  <p>How do I remove the inherited background image?</p>