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

by Tom Kenny (@tkenny)

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.


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.

Design Inspiration from the World's Best Designers

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.