Creating elements with rounded corners in HTML

There are a number of ways that you can add curved corners to elements. I list two here, the first is the way that I now prefer to do it while the second is an older, but currently more supported method (it's a lot messier though).

The simple method

.curved { 
  -moz-border-radius:10px; /* Firefox */ 
  -webkit-border-radius:10px; /* Safari and chrome */ 
  -khtml-border-radius:10px; /* Linux browsers */ 
  border-radius:10px; /* CSS3 */ 
}

The obvious drawback to this approach is that IE isn't supported as it doesn't provide a CSS method as the other browsers do. There is however a project that provides a htc for IE that will allow you to add just one more line of CSS to support IE.

A cross browser method

This is a way to create elements (such as the labels on the left) with rounded corners.

The first thing to do is to generate the images that are going to be used on the corners. Google provides a nice image generator and it's use is described on Zach's Journal.

Once you have the images for all four corners you can set up some divs and use css to render them as you'd like.

Example of the div structure:

<div class="tech_tip_label">
  <div>
    <div>
      <div>
        <div>
          ExampleC ontent
        </div>
      </div>
    </div>
  </div>
</div>

And the CSS:

div.tech_tip_label {   
  background-repeat:no-repeat; 
  background-color:#AAAAAA; 
  color:white; 
  margin:2px; 
  width:100%; 
  text-align:center; 
}

div.tech_tip_label div {   
  background: url("/images/grey_bl.png") 0 100%; 
  background-repeat:no-repeat; 
}

div.tech_tip_label div div {   
  background: url("/images/grey_br.png") 100% 100%; 
  background-repeat:no-repeat; 
} 

div.tech_tip_label div div div {   
  background: url("/images/grey_tl.png") 0 0; 
  background-repeat:no-repeat; 
}

div.tech_tip_label div div div div {   
  background: url("/images/grey_tr.png") 100% 0; 
  background-repeat:no-repeat; padding:10px; 
}