Rounded Corner Input Form





I was involved in a project for re-design a web page that required to create a rounded form. After googling, i did not find any satisfying result, more of them offer a mozilla CSS technique and its only working on Firefox and Mozilla (Gecko) Browser, so I try to make a simple rounded corner input form.

The idea is so simple, to put the rounded background behind the form, and make the <input> invisible by removing the border and adjusting the background. So what you see is only the rounded background, simple isn’t it?

Okay, lets get it on…

To make round a fixed width form, I put <input> into <div>.

<div class="rounded">
<input type="text" name="address" />
</div>

Now, what you need is a rounded image with a view of css code. I made an image in transparent GIF below:

Rounded Image

And the code:

input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background:  url(rounded.gif) no-repeat left top;
padding: 8px;
}

Look at the working Rounded Form Example. I know its a kind of a newbie thing couse I am a newbie anyway, Hope it’s usefull. Cheers…

17 thoughts on “Rounded Corner Input Form

  1. @firman: I am…
    @Deny, @Yogi: Udah nemu sih caranya, pake teknik “sliding door” gitu, tapi sialnya di IE ada masalah kalo kita ngisi teksnya lebih dari width yang ditentukan… dicari dulu solusinya…

  2. There is an easier way:

    input {
    background:url(yourimagewithroundedcorners.png) no-repeat;
    width:XXpx;
    height:XXpx;
    padding:XXpx; /* put a padding */
    }

  3. Truly, tomasz is right. Too many divs are not good, the simplest way is the best. But: thanks for the effort, it helped me!

  4. @Tomasz, max: Yes, but unfortunately tomasz’s version is buggy under IE6, if you try to add text wider than the max charachter / box available, the background will scroll to left. I’ve tried this method before.

  5. Hello,

    It’s the best, totally cross-browser method out there. Forget about using a background image for a text input – it causes a popular bug in IE6 (with a workaround – ‘position: fixed’) and IE7 (without any workaround, ‘fixed’ doesn’t do the trick any more).

    So, thank you and have a successful year :)

  6. I would remove the “width: 165px;” property, otherwise all your checkboxes and radio buttons would also get this width.

  7. I think this would benefit from changing the outline to none so when you click in it there isn’t a border inside the border.

    input {
    border: none;
    outline: none;
    background: #FFF;
    width: 165px;
    }

    since this is an older post and i’m fairly new to development maybe this wasn’t the case back then so no knock on you and thanks for the info :) I was going to csspie with a hosted cdn link for it but i’ll do this instead

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>