CSS3 Examples

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 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 into

.

Now, what you need is a rounded image with a view of css code. I made an image in transparent GIF below:

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…

• Digg this
• Add to del.icio.us
• Stumble It!

No Comment | Posted in » Advance CSS3  

Related Posts by Categories

Widget by John | Interviewghost