CODEWITHSUNDEEP
css
aneuryzm
aneuryzm

Reputation: 64884

CSS: rounded text input fields

how can I make rounded text input fields with css ?

thanks

Upvotes: 7

Views: 36241

Answers (7)

stodgy.nerd
stodgy.nerd

Reputation: 611

Use border-radius use pixels according to your layout.

Upvotes: -1

nick
nick

Reputation: 1

^ 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!

Upvotes: 0

Joonas Trussmann
Joonas Trussmann

Reputation: 1064

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.

Upvotes: 0

rabidmachine9
rabidmachine9

Reputation: 7985

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

Upvotes: 0

helle
helle

Reputation: 11660

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

Upvotes: 1

KPM
KPM

Reputation: 10608

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

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382919

With CSS3:

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

Upvotes: 5

Related Questions