Modern CSS3-compatible browsers such as Firefox and other Mozilla flavors now support rounded corners for form elements. While Internet Explorer 8 may be an improvement over 7, it still does not support the CSS3 standard as well as might be hoped for. Here is an example of what can be achieved:
Without CSS3:
With CSS3:
Note that the second textarea element has a thicker white border, different background color, and different text color. It is easily possible to assign different border colors and radiuses to different elements. It is important to set a background color, even if it is to be the same as the page background color. I have found that if you don’t, your rounded borders may not be displayed.
Sample HTML/inline CSS code:
<form>
<input style=”-moz-border-radius: 5px;-webkit-border-radius: 5px;background-color:#444;color:#fff;border: 1px solid #CCC;” name=”subject” type=”text” />
<textarea style=”-moz-border-radius: 10px;-webkit-border-radius: 10px;background-color:#222;border: 2px solid #fff;color:#fff;” name=”subject”></textarea>
<input type=”submit” value=”submit” />
</form>
