Round input button

Test Form

Only one image is used but it is large enough to cover most uses. It will however only cater for horizontal expansion and not vertical expansion.

The label is wrapped around the input and the image is applied to the label. Some padding is added to the left side of the label to preserve the round corner effect.

The input has an extra span wrapped around it so the right side of the image can be applied. This span is only needed for IE7 as the image could actually be applied to the input instead but IE7 has a background image bug on inputs and will scroll the image away should enough text be entered.

The image is then placed at the right side of the span and completes the effect. The image is wide enough to cover day to day use and so that both sides of the cornes are not eveident in bolt telements at the same time.