Virginia Web Designers: Joomla, Drupal, Open-Source, CSS, and PHP Northern Virginia / Maryland / Washington DC web designers

Rounded form elements with CSS3

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>