Getting a div to have rounded corners with CSS is not too difficult of a task. I came across a solution I would like to share quickly and briefly. Please note I found it only works in IE9, Firefox and Chrome. It’s really only a couple lines of CSS so lets’ take a look.

.roundedCorners {
   -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius: 10px;
}

By setting these 3 values, you get a pretty nice rounded edge. Now here is a weird edge case I came across. I used a gradient background through CSS in a div and in IE9 the gradient was not rounded off. So the fix for that was to surround it with a div and use an overflow: hidden to mask the colors.

<div class="roundedCorners mask">
    <div class=" roundedCorners gradientBackground">
    </div>
</div>

//CSS
.gradientBackground {
    /* for IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#fff');
    
    /* for webkit browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); /* for webkit browsers */
    
    /* for firefox 3.6+ */
    background: -moz-linear-gradient(top,  #ccc,  #fff); /* for firefox 3.6+ */
}

.mask {
     overflow: hidden;
}

The above code properly rounded the corners of my div and provided a gradient with rounded corners as well in IE9, Firefox, and Chrome.  The rounded corners don’t work in older versions of IE.