CSS3 rounded corner input

CSS3 rounded corner input

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:

rounded corner input example screenshot

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.

Related Posts


9 thoughts on “CSS3 rounded corner input

  1. Corliss Bery

    Great write-up, I am regular visitor of one’s site, maintain up the nice operate, and It is going to be a regular visitor for a lengthy time.

    Reply
  2. kore dizileri izle

    I necessary for this blog put up admin actually thanks i will glance your following sharings i bookmarked your blog

    Reply
  3. Logan Reising

    I simply want to say I am just new to weblog and certainly loved this blog. Most likely I’m planning to bookmark your site . You certainly come with tremendous articles. Thank you for revealing your web page.

    Reply
  4. Vicente

    Superb post admin thank you. I discovered what i was looking for here. I will review overall of posts with this time of day

    Reply
  5. Donte Brownlee

    I discovered your blog web site on google and examine a few of your early posts. Proceed to maintain up the excellent operate. I simply further up your RSS feed to my MSN Information Reader. In search of forward to studying more from you in a while!…

    Reply
  6. Barbera Callado

    I just want to tell you that I am all new to blogging and site-building and really savored your web blog. More than likely I’m want to bookmark your blog post . You actually have superb articles. Thank you for sharing with us your web site.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*