Tag Archives: form

Rounded Corner Form Elements

One task I am being faced with more often when creating form elements is the use of rounded corners on text inputs, select boxes and text areas. One solution in dealing with this dilemma is just to crop out the round corner image from the concept file, give the form elements a border that matched the background color and place them into that area. This way may be the simplest answer to the problem but it is riddled with problems.

  1. When a user resizes the text, the box will not expand.
  2. You will need a new image for each different size of input you need.
  3. Absolute positioning (and the resulting extra CSS lines will need to be added) is the only sure way to line up the inputs inside the image

Continue reading Rounded Corner Form Elements