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 Comments

  1. dotruez

    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

  2. Jack

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

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

  4. Ondra

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

  5. luciustori

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

  6. OlekReksc

    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 🙂

  7. ado

    want to fix IE6 buggy?

    Try this-

    _background-attachment : fixed;

  8. Alberto

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

  9. PupungBP

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

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

  11. tomasz

    There is an easier way:

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

  12. PupungBP

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

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.