I had a series of five 100x75 images, concatenated into a single image, and I wanted to display them as individual images with rounded corners.

To round the corners, I used the following ImageMagick command:

convert -size 100x75 xc:white -fill "#ffe" -draw "roundrectangle 0,0,100,75 10,10" -transparent "#ffe" mask.gif

It creates an image, dimensions of 100x75 pixels, with a white canvas. A rounded rectangle is drawn on it, filled with #ffe (any color will do). Next, the rectangle dimensions are given, as well as the rounding settings. Finally, the transparent option is used to indicate that the fill color is actually transparent. Be sure to use an image format (.gif or .png) that supports transparency.

A class was used to assign the mask, and an id was used to position the background image.

.dvPhone  
{
        float:left;
        width:100px;
        height:75px;
        margin:7px;
}
.dvPhoneNumber
{
        height:75px;
        width:100px;
}
#dvOffice
{
        background:transparent url(bg.jpg) no-repeat 0 0;
}
.round
{
        background:transparent url(mask.gif) no-repeat;
        width:100px;
        height:75px;
}

<div class="dvPhone">
<div id="dvOffice" class="dvPhoneNumber">
<div class="round">
<label>Office</label>
<input type="text" name="sOfficePhone" id="sOfficePhone" value="0000000000" />
</div>
</div>
</div>

Tested with IE7, FF3.

Related: http://web-notes.wirehopper.com/2009/06/07/smoother-imagemagick-rounded-rectangles