Rounded Corner Form Elements

One task I am being faced with more often when creating form elements is the use of rounded corners on text inputs, select boxes and text areas. One solution in dealing with this dilemma is just to crop out the round corner image from the concept file, give the form elements a border that matched the background color and place them into that area. This way may be the simplest answer to the problem but it is riddled with problems.

  1. When a user resizes the text, the box will not expand.
  2. You will need a new image for each different size of input you need.
  3. Absolute positioning (and the resulting extra CSS lines will need to be added) is the only sure way to line up the inputs inside the image

In order to work through these issues and out clean scalable rounded corner form elements we will first begin by creating the HTML code for the input elements.

  • <strong>
  • <em>
  • <span>
  • <span>

These will provide the hooks our CSS will need in order to create the rounded corners. You can use any HTML tags you would like to surround the code as long as you can add a style to it.

The strong and the em tag will receive longer images that will account for and size changes on the input fields and text size increases. The other two images will just be images of the corners. The two longer images will need to have a transparent background for the color inside the lines. If you have a non-solid color background just make the bottom left image have the background and the top right image transparent.

The CSS

strong {background: url(/images/input-bottom-left.gif) no-repeat 0 100%; display: block; float: left;}/*longer sides*/
strong em {background: url(/images/input-top-right.gif) no-repeat 100% 0; display: block; float: left;}/*longer sides*/
strong em span {background: url(/images/input-bottom-right.gif) no-repeat 100% 100%; display: block; float: left;}
strong em span span {background: url(/images/input-top-left.gif) no-repeat; display: block; float: left;}
input, select, textarea {margin: 1px 3px; border: 1px solid #fff;}

The HTML

<form>
<fieldset>
<legend>Rounded Corner Form Elements</legend>
<label for="txtFirstName">First Name:</label>
<strong><em><span><span><input id="txtFirstName" maxlength="50" name="FirstName" size="25" type="text" /></span></span></em></strong><br />
<label for="txtLastName">Last Name:</label>
<strong><em><span><span><input id="txtLastName" maxlength="50" name="LastName" size="15" type="text" /></span></span></em></strong><br />
<label for="txtaraComment">Comment</label>
<strong><em><span><span><textarea id="txtaraComment" cols="50" rows="10" name="Comment"></textarea></span></span></em></strong><br />
</fieldset>
</form>
Rounded Corner Form Elements


28 thoughts on “Rounded Corner Form Elements”

  1. … also, your comment box stripped my previous quote.

    1) Why did you list your “span” tag twice?
    2) I am inherently lazy, so why make me work to find your code? I know it is sooo hard to post your markup in a code block but give it a shot.

    Thanks – I am going to use this technique on all my forms.

  2. @scottrieger.

    I am css naked because I am holding out for a really super fantastic design for my site. I figured this was better than a crappy design.

    I will re-edit the post to include the code inline. Thanks for the tips.

  3. This looks great, but why do you use strong and em tags?

    Could you use and instead?

    I’m going to try anyway, and test in ie7 ie6 FF and Saf

  4. Neil,

    It looks like what you wanted to check did not come through on the comment. I don’t really have any reason for picking the strong and em tag. When I first started using this method I was already using strong and em’s on rounded corner background images and just used similar HTML for these. You can use any HTML tag as your hook for the CSS if you like. I prefer inline elements like strong, em and span, but you can use div or any other element that nests well if you would rather.

  5. It works with span class=”rndc” in place of the strong tag and span class=”rndc2″ in place of the em tag.

    The border on my select drop down is still showing inside the rounded corner box.

    I’ll have to have a look round to get that off. I’ll let you know how I get on.

  6. If you match the border color of the input, select, etc… to the background of the inside of your form elements, the border around the select box will go away in opera and firefox. I have noticed that IE will use its own blue border and safari will do its own thing inside the rounded box. You can always specify ie to not use the rounded corners in your ie css if it doesn’t work with your design.

    Let me know if your find a way to remove it in ie.

  7. Hi i am trying to trace the Bathew family tree, I live in England but i know a few of our ancestors emigrated in the early 1900,s if you have any info on your ancestors i would greatly appreciate it and i will pass any info if you would like to know

    Sarah

  8. Very nice effect. But I still can’t figure it out what kind of images did you used. Could you please post them here or send them to me by mail ?

  9. Thank you. Very quick response. Now I can understand 100%, and it works. Thanks again.

  10. Would you mind cleaning up the HTML inside the HTML box? It has a bunch of character identities inside of it instead of actual characters (e.g., “<form>” instead of “”).

    Thanks! :)

  11. comment box of your site itself in nor showing rounded corner in ie 8.0 is it for other browsers.

  12. The actual comment box for my site uses the css3 border-radius property, which does not work in IE 8 and below. It was not a goal of my current theme to “look” the same in all browsers. A lot of the css3 items I have used only show up in the latest Webkit and Mozilla browsers.

    The comment box example (using the image method from the post) at the end of the post does work in IE 8.

  13. Finally i quit my day job, now i earn decent money on-line you should
    try too, just type in google – bluehand roulette system

  14. I read a lot of interesting posts here. Probably you spend a lot of
    time writing, i know how to save you a lot of work, there is an online tool that creates high quality, SEO
    friendly articles in minutes, just type in google – laranitas free content source

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>