Rounded Corner Input Form

July 25, 2007

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" />

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…

You Might Also Like


  • Reply firman firdaus July 25, 2007 at 23:34

    newbie huh? mmm…

  • Reply Deny Sri Supriyono July 25, 2007 at 23:47

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

  • Reply Yogi July 26, 2007 at 8:08

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

  • Reply PupungBP July 26, 2007 at 9:19

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

  • Reply cicit December 19, 2007 at 15:00

    Eh gimana yah klo bisa juga?

  • Reply martin20 January 4, 2008 at 19:30

    thanks we will publish this solution on out site.

  • Reply tomasz April 10, 2008 at 21:52

    There is an easier way:

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

  • Reply max June 26, 2008 at 22:08

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

  • Reply PupungBP June 28, 2008 at 2:00

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

  • Reply dora September 24, 2008 at 21:39

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

  • Reply Alberto April 21, 2009 at 20:52

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

  • Reply ado May 10, 2009 at 6:08

    want to fix IE6 buggy?

    Try this-

    _background-attachment : fixed;

  • Reply OlekReksc January 6, 2010 at 3:11


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

  • Reply luciustori August 26, 2010 at 0:23

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

  • Reply Ondra October 10, 2010 at 20:51

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

  • Reply hans July 11, 2011 at 21:33

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

  • Reply Jack January 22, 2012 at 17:07

    .input {
    border: 1px solid #006;

  • Reply neeker June 21, 2012 at 4:15

    Thanks! Lifesaver!

  • Reply dotruez September 20, 2012 at 23:05

    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