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 comments

  1. PupungBP says:

    @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. tomasz says:

    There is an easier way:

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

  3. PupungBP says:

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

  4. OlekReksc says:

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

  5. dotruez says:

    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>