title: CSS div rounded corners
body: <p>I'm attempting to do the following... </p>
  
  <p>Here's what I've got right now.. but it's not rendering correctly. Does anyone have any idea as to how I'd fix this?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    /* Curved Corners */
      .bl {
  background: url(bl.gif) 0 100% no-repeat;
  /*background-color:#EFFBEF;*/
  width: 700px;
  margin-left: auto ;
  margin-right: auto ;}
      .br {
  background: url(br.gif) 100% 100% no-repeat;
  }
      .tl {
  background: url(tl.gif) 0 0 no-repeat;
  }
      .tr {
  background: url(tr.gif) 100% 0 no-repeat;
  }
      .clear {font-size: 1px; height: 1px}
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="bl"&gt;&lt;div class="br"&gt;&lt;div class="tl"&gt;&lt;div class="tr"&gt;
  
          &lt;div id="header"&gt;
  
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
  
      &lt;/div&gt;
  
          &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>