CODEWITHSUNDEEP
htmlcss
GeekedOut
GeekedOut

Reputation: 17185

How to make a text box have rounded corners?

I have this wireframe http://problemio.com/problemionewest.pdf and you see on the top-right there is a text box that has rounded corners.

Is that done with css only or image and css? I have an image that was provided to me, but would much rather just do it with css. In any case, I don't know how to do it either way lol, so any help would be great!

The current version I have is here: http://www.problemio.com

Upvotes: 25

Views: 132125

Answers (2)

sdleihssirhc
sdleihssirhc

Reputation: 42496

You could use CSS to do that, but it wouldn't be supported in IE8-. You can use some site like http://borderradius.com to come up with actual CSS you'd use, which would look something like this (again, depending on how many browsers you're trying to support):

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

Upvotes: 57

Curtis
Curtis

Reputation: 103358

This can be done with CSS3:

<input type="text" />

input
{
  -moz-border-radius: 15px;
 border-radius: 15px;
    border:solid 1px black;
    padding:5px;
}

http://jsfiddle.net/UbSkn/1/

However, an alternative would be to put the input inside a div with a rounded background, and no border on the input

Upvotes: 19

Related Questions