Question

I have a form which has some fields and more fields get added dynamically based on the form fields that get selected. How would I get it to expand horizontally as well as vertically as soon as new form fields are being added. Also should I use sprites for this or just put an image tag with rounded corners. I don’t want to achieve this with CSS3 please. Can I achieve this using clip property.

Answer 1

To create a rounded corner effect, I usually draw a circle and then use it as a background within 4 absolutely positioned divs within the element that needs rounded corners.

The height of each absolutely positioned div is half the height of the circle and the width of each div is half the width of the circle.

CSS

.roundedCorner  {
    background-color: #CECFD4;
    background-image: url("images/cornerSprite.png");
    height: 15px;
    overflow: hidden;
    position: absolute;
    width: 15px;
    z-index: 2;
}

.topRight  {
    background-position: 15px 0;
    right: 0;
    top: 0;
}

.topLeft  {
    background-position: 0 0;
    left: 0;
    top: 0;
}

.bottomLeft  {
    background-color: #CECFD4;
    background-position: 0 15px;
    bottom: 0;
    left: 0;
}

.bottomRight {
    background-position: 15px 15px;
    bottom: 0;
    right: 0;
}

HTML

<div>
    <div class="roundedCorner topRight"></div>
    <div class="roundedCorner topLeft"></div>
    <div class="roundedCorner bottomRight"></div>
    <div class="roundedCorner bottomLeft"></div>
    <p>Some content</p>
</div>

It is a bit of a long-winded way of doing it but it will work for browsers that do not support rounding corners through CSS and will expand to fit any element size.

JSFiddle: http://jsfiddle.net/UAyVJ/