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

  • Tom Kenny

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.

Coming Soon...

The Learn from Great Design Volume 1 eBook


The bad news is it isn't ready yet but the good news is you can get three case studies for free, right now. Simply sign up and I will send it to you immediately. People subscribed to the email newsletter also get a discount on the book when it's released.

The book will contain 20 LFGD case studies (I spend at least 5 hours on each one) but there will be another version of the book with even more studies and at least 3 masterclasses, with even more in-depth studies of great design. One of them is the travel giant Airbnb.

Sign up below to get notified of the launch.

Free. No spam. Unsubscribe any time.