The CSS3 properties border-radius and box-shadow allow a designer to easily create rounded input boxes with pure HTML and CSS without having to resort to images. This post shows how it can be done and deals with vendor prefixes and other cross browser issues to ensure the input boxes work across all browsers.
What am I trying to achieve?
Here’s a screenshot taken from Chrome 10 on Mac Snow Leopard showing an HTML input box with rounded corners and a drop shadow using just CSS to syle it and no images:
And here’s the input in action. You can click into it and see the border change color as it gains focus. You’ll need Chrome, Safari 5+, IE9+, Opera 11+, FF 3.5+, iOS, Android for this to work correctly. See also below further notes about browser support.
If you are viewing this in a feed reader you might need to click through to view the article in a web browser for the input in action to work correctly.
The CSS
Here’s the CSS to implement the above input box. Modify the border-radius value to make it more or less rounded and the box-shadow values to make the offset bigger or smaller and the shadow colour different, or remove the shadow altogether.
There’s plenty of notes in the CSS itself, but see also the table below for summarized information about browser support and also about the ratio of the border-radius for iOS devices.
input.rounded {
border: 1px solid #ccc;
/* Safari 5, Chrome support border-radius without vendor prefix.
* FF 3.0/3.5/3.6, Mobile Safari 4.0.4 require vendor prefix.
* No support in Safari 3/4, IE 6/7/8, Opera 10.0.
*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Chrome, FF 4.0 support box-shadow without vendor prefix.
* Safari 3/4/5 and FF 3.5/3.6 require vendor prefix.
* No support in FF 3.0, IE 6/7/8, Opera 10.0, iPhone 3.
* change the offsets, blur and color to suit your design.
*/
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
/* using a bigger font for demo purposes so the box isn't too small */
font-size: 20px;
/* with a big radius/font there needs to be padding left and right
* otherwise the text is too close to the radius.
* on a smaller radius/font it may not be necessary
*/
padding: 4px 7px;
/* only needed for webkit browsers which show a rectangular outline;
* others do not do outline when radius used.
* android browser still displays a big outline
*/
outline: 0;
/* this is needed for iOS devices otherwise a shadow/line appears at the
* top of the input. depending on the ratio of radius to height it will
* go all the way across the full width of the input and look really messy.
* ensure the radius is no more than half the full height of the input,
* and the following is set, and everything will render well in iOS.
*/
-webkit-appearance: none;
}
input.rounded:focus {
/* supported IE8+ and all other browsers tested.
* optional, but gives the input focues when selected.
* change to a color that suits your design.
*/
border-color: #339933;
}
Now all you need to do is assign the "rounded" class (or rename it to something else) to your input box like so:
<input type="text" class="rounded" />
Finally, here’s a condensed version of the CSS without all the comments:
input.rounded {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 20px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
}
input.rounded:focus {
border-color: #339933;
}
Browsers tested/supported
The Mac version tested on was Snow Leopard.
Where it says "Prefixed" it means the vendor prefix is required, e.g. -moz-box-shadow
| Browser | Border Radius | Box Shadow | Border Required |
| Chrome 10 Mac | Yes | Yes | No |
| Firefox 3.0.5 XP | Prefixed | No | Yes |
| Firefox 3.0.12 Mac | Prefixed | No | Yes |
| Firefox 3.5.18 Mac | Prefixed | Prefixed | Yes |
| Firefox 3.6.16 Mac | Prefixed | Prefixed | Yes |
| Firefox 4.0.0 Mac | Yes | Yes | No |
| IE6 XP | No | No | N/A |
| IE7 XP | No | No | N/A |
| IE8 XP | No | No | N/A |
| IE9 XP | Yes | Yes | No |
| Opera 10.01 XP | No | No | N/A |
| Opera 11.10 Mac | Yes | Yes | Yes |
| Safari 3.2.2 XP | No | Prefixed | No |
| Safari 4.0.5 XP | No | Prefixed | No |
| Safari 5.0.5 Mac | Yes | Yes | No |
| Mobile Safari 4.0.4 | Prefixed | Prefixed | No |
| Mobile Safari 4.0.5 | Yes | Prefixed | No |
It would have been nice to have tested Opera 10.5 to see what support it offers, but I didn’t have it installed in any of my Virtual Machines and couldn’t be bothered tracking down a copy 🙂
Mobile Safari 4.0.4 was on an iPad 1 with iOS3.2 using the iPhone Simulator software; Mobile Safari 4.0.5 with iPhone 3/4 running iOS4 using the iPhone Simulator.
I also tested on Android 2.2 on a Samsung Galaxy S which was running "Version/4.0 Mobile Safari/533.1" which appears to have a more recent rendering engine than on iOS4. It worked fine using the CSS above, although it had a great big outline around the text box despite having outline: 0;
Browsers that don’t support border-radius
IE6/7/8 do not support border-radius so they’ll see a regular old rectangular input box. It will still work and as users of those versions finally drop off it won’t be an issue any more.
Mobile Safari and border-radius issues
Mobile Safari on the iPhone and iPad* have some rendering issues when it comes to border-radius which result in a line appearing just below the top border. Depending on the ratio of the radius to the height of the box it may appear the full width of the input or just inside it. Either way, it looks a little messy.
Thanks to this post on StackOverflow, it appears easy enough to solve: simply ensure the radius is no more than half the height of the input and add "-webkit-appearance: none;" as one of the properties to the style. Then it renders nicely.
(*and possibly Android. I didn’t test as by then it was working nicely on mobile devices).