CSS: Rounded Text Fields

Question

how can i do fields with rounded input text using css?

thanks

Answer 1

Both answers are correct, you can use CSS3 styles (which are not actually supported by current IE), or you can use a javascript package like http://www.malsup.com/jquery/corner/ .

There is, however, another option that cannot be discarded, even if it is not perfect. If your inputs have a fixed length, you can also draw any background (including borders) that your inputs require into the image and use

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

This allows you to work with almost all browsers that you can think of.

Answer 2

With CSS3:

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

Answer 3

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

Answer 4

in modern css3 browsers

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

older you will need to use a js-like jquery with rounded corners or ruzee

Answer 5

Perhaps you can remove the contours from the input fields, and then use jQuery to put them inside a curved border ...

Answer 6

^ that the latter will work on all browsers. However, some browsers add a scheme! Chrome, safari, etc.

I know that you can disable the path in chrome using the path: 0, but I have not found a way that you can disable the path in Safari. It will look disgusting!

Answer 7

Use border-radius to use pixels according to your location.