how can I make rounded text input fields with css ?
thanks
1
-
Though several of the answer below work the answer using CSS3 is probably the stronger solution in todays web standards. Most browsers support CSS3 nowadays.ScottyG– ScottyG2017-04-25 22:09:02 +00:00Commented Apr 25, 2017 at 22:09
Add a comment
|
7 Answers
With CSS3:
/* css 3 */
border-radius:5px;
/* mozilla */
-moz-border-radius:5px;
/* webkit */
-webkit-border-radius:5px;
Comments
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
Comments
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.
3 Comments
aneuryzm
hi, the plugin you suggested is cool, and I'm using it for divs. However I'm afraid it doesn't work for text-input fields... any tip ?
Joonas Trussmann
Just wrap your inputs in a div?
Joonas Trussmann
Do you mean that the rounded div is placed behind the input? In that case just make the input transparent (see my previous example, just omit the url() part). If it's something else a link to a demo would be nice.
Try something like this: http://hannivoort.org/test/InputRoundedCorners.asp
Comments
Maybe you could remove the outlines from the input fields and then with jQuery put them inside a curved box...
Comments
^ 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!
Comments
Use border-radius use pixels according to your layout.
1 Comment
stodgy.nerd
border-radius: 2px;