title: JQuery Rounded Corners Implementation
body: <p>I have a rather crude implementation of corners for (main_bg.gif) within the wrapping global-inner div. Although now this functions with inner divs to represent each corner, I was told its not the best implementation, so if anyone has a cleaner solution, well that would be great!</p>
  
  <p>The bottom corner images utilize:  <code>margin-top: -8px;</code></p>
  
  <p>You can see this inner image (very light blue) with its corners: <a href="http://www.davincispainting.com" rel="nofollow">http://www.davincispainting.com</a></p>
  
  <p>Also I cant utilize CSS3 unfortunately.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="global-wrap&gt;  
      &lt;div id="global-inner"&gt;
          &lt;div class="topleft"&gt;
          &lt;/div&gt;
          &lt;div class="topright"&gt;
          &lt;/div&gt;
          &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"&gt;
          &lt;/asp:ContentPlaceHolder&gt;
          &lt;br style="clear: both" /&gt;
          &lt;div id="bottom-wrap"&gt;&lt;/div&gt;
          &lt;div class="bottomleft"&gt;
          &lt;/div&gt;
          &lt;div class="bottomright"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the relevant CSS:</p>
  
  <pre><code>body
  {
  background-color: #9EB0C8;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 62.5%;
  }
  #global-wrap 
  {
  margin: 0 auto;
  text-align: left;
  width: 880px;
  overflow: hidden;
  }
  #global-inner 
  {
  background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
  font-family: Arial;
  font-size: 1.2em;
  margin: 15px 0 55px 0;
  overflow: hidden;
  text-align: left;
  width: 880px;
  }
  #global-inner .topleft 
  {
  background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
  float: left;
  height: 9px;
  width: 9px;
  }
  #global-inner .topright 
  {
  background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
  float: right;
  height: 9px;
  width: 9px;
  }
  #global-inner .bottomleft 
  {
  background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
  float: left;
  height: 9px;
  margin-top: -8px;
  width: 9px;
  }
  #global-inner .bottomright 
  {
  background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
  float: right;
  height: 9px;
  margin-top: -8px;
  width: 9px;
  }
  </code></pre>
  
  <p>How would I implement this Corner for 2 CSS items?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#global-inner').corner('15px');
  &lt;/script&gt;
  
  #global-inner 
  {
  background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
  font-family: Arial;
  font-size: 1.2em;
  margin: 15px 0 55px 0;
  overflow: hidden;
  text-align: left;
  width: 882px;
  }
  #mid-featureleft-faq .contentbox
  {
  /*height:260px;*/ 
  width:536px; 
  padding:3px 7px 0 7px;
  margin:0 0 0 0;
  position:relative;   
  }
  </code></pre>