A new version of Inspect Element is coming soon! Subscribe to the newsletter for updates. Subscribe

Rounded Corners on Input Fields in (almost) all Modern Browsers

Rounded corners in web design is a popular, modern technique. In general, it can give a site a smoother look and feel to the design but the only way to get it working in all browsers is through the use of images. If you apply the method of progressive enhancement then you can use CSS3 techniques to add rounded corners to web elements without the need for images.

It is common knowledge that this can be done on divs but many designers and developers probably don’t think of using it on input fields. Well, you can! By using the code below you can let the browser do the work while cutting down on the amount of data that the user downloads and also reducing the number of HTTP requests which improves performance.Just use the following segment of code in your CSS, adjusting the border radius as you see fit:

input { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Browser Support

Currently this is only supported in the following major browsers:

  • Firefox 2+
  • Safari 3+
  • Google Chrome
  • Opera

-moz-border-radius is a proposal of mozilla so only works in Firefox and -webkit-border-radius is a proposal of webkit so will work in webkit browsers such as Chrome and Safari. Don’t forget to include the standard border-radius property for future browser support as this is the value that the final CSS3 spec is highly likely to use.

Unfortunately Internet Explorer 8 does not support rounded corners or border-radius of any kind. This was a chance that Microsoft had to gain back a tiny bit of credibility amongst the web design/development community but they couldn’t even implement this simple property.

Examples

You can see an example of this on this very page. Just view the comment form in any supported browser and you’ll see the input fields have rounded corners. This makes them easier on the eye and more friendly to the user, added encouragement for them to comment.

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: