Rounded corners without the HTML mess

Fortunately, CSS3 has come out with a way to create rounded corners automatically without using images, but on the other hand, many popular browsers (such as Internet Explorer) may take a while before it fully/partially supports CSS3 W3C recommendations.

Many designers know how to create rounded corners using CSS, HTML, and a bunch of images, but these techniques cause a lot of HTML/CSS clutter.

Below is an example of some cluttered HTML used to create rounded corners.

<div class="roundedbox">
  <div class="hd">
  <div class="c"></div>
</div>
<div class="bd">
  <div class="c">
    <div class="s">
      <-- main content goes here -->
    </div>
  </div>
</div>
<div class="ft">
  <div class="c"></div>
</div>
</div>

That’s quite a lot of code for one rounded box. Most designers know that it can be difficult to sift though HTML code like this, especially when trying to alter a page that use several rounded corners.

A solution to our problem is simple though – instead of writing all of the extra HTMLdivs each time we need a new rounded box, we can simply have jQuery do all the work for us (by way of DOM manipulation).

This useful technique is from Day 13 of the 15 Days of jQuery site. For a full tutorial or more detail on how it works, head on over there.

By utilizing the script below, we can automatically add the extra divs where needed.

<script type="text/javascript">
$(document).ready(function(){
    $("div.roundbox").wrap('
      <div class="roundedbox">'+
      ' <div class="bd">'+
      '   <div class="c">'+
      '     <div class="s">'+
      '     </div>'+
      '  </div>'+
      ' </div>'+
      '</div>');
});
</script>

The use of div.roundbox in the snippet above is key. Now, instead of writing out all of those divs every time we need to create a new rounded box, all we have to do is use the class roundbox; jQuery will traverse the DOM to find all elements that has that class value and will automatically wrap it around div‘s.

Here’s a sample div HTML structure:

<div class="roundbox">
  <-- main content goes here -->
</div>

Of course, you’ll still have to use some CSS to get the rounded corner images to work, and Jack Born of 15 Days of jQuery provides you with a downloadable package that includes the auxiliary source files you’ll need.

Posted in: CSS,jQuery