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…

19 Comment

  1. newbie huh? mmm…

  2. nice, pung.
    next post will be rounded corner for any width ya? :D

  3. Yogi says: Reply

    Hehehe..kl bisa any width gw juga mau donk :D

  4. PupungBP says: Reply

    @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…

  5. cicit says: Reply

    Eh gimana yah klo bisa juga?

  6. thanks we will publish this solution on out site.

  7. tomasz says: Reply

    There is an easier way:

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

  8. max says: Reply

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

  9. PupungBP says: Reply

    @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.

  10. dora says: Reply

    Thanks for the css info. The easiest way to make round corner: http://www.roundz.net/

  11. Alberto says: Reply

    How to make the same rounded corner text input with a span instead of a div?

  12. ado says: Reply

    want to fix IE6 buggy?

    Try this-

    _background-attachment : fixed;

  13. OlekReksc says: Reply

    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 :)

  14. luciustori says: Reply

    hm..try new css trick
    “border-radius” for any width…but IS still suck on this CSS3.

  15. Ondra says: Reply

    Hello Olek,
    i think your post, resolved my problem;-)

  16. hans says: Reply

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

  17. Jack says: Reply

    .input {
    border: 1px solid #006;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    }

  18. neeker says: Reply

    Thanks! Lifesaver!

  19. dotruez says: Reply

    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