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…