CSS: rounded text input fields

how can I make rounded text input fields with 开发者_如何学Ccss ?

thanks

With CSS3:

 /* css 3 */
 border-radius:5px;
 /* mozilla */
 -moz-border-radius:5px;
 /* webkit */
 -webkit-border-radius:5px;

in modern css3 browsers

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

in older you'll need to use a JS like jquery with rounded corners plugin or Ruzee

Both answers are correct you can either use CSS3 styles (which aren't really supported with the current IEs) or you can use a javascript package such as http://www.malsup.com/jquery/corner/.

There is however another option, which shouldn't be discarded even though it's not exactly ideal. If your inputs are of fixed length you can also draw whatever background (including borders) you want for your inputs into an image and use

background: transparent url(pathToYourImage.png);
border: none;

This has the benefit of working on pretty much all browsers you can think of.

Try something like this: http://hannivoort.org/test/InputRoundedCorners.asp

Maybe you could remove the outlines from the input fields and then with jQuery put them inside a curved box...

^ that last one will work on all browsers. However some browsers add an outline! Chrome, safari etc.

I know you can turn off the outline in chrome using outline:0, but there is no way that I found where you can turn off the outline in Safari. It will look hideous in it!

Use border-radius use pixels according to your layout.