CODEWITHSUNDEEP
htmlcssforms
gespinha
gespinha

Reputation: 8487

Form input border-radius not working properly

I am testing with CSS on forms and bumped on this: http://jsfiddle.net/gespinha/z4a4G/1/

As I try to make the form inputs round-cornered, they assume the whole input as a round object.

border-radius:50%;

Any suggestion on how to achieve this correctly? Why does this happen?

Upvotes: 0

Views: 1524

Answers (3)

Brian Phillips
Brian Phillips

Reputation: 4425

Giving it a px value works best in this scenario. Percentage is typically used when creating shapes (in your case, a circle)

input{
    border-radius:10px;
}

I believe this is what you're going for. Giving your borders a percentage will mean that they will all look different based on the width and height. Using px gives it a consistent look.

Upvotes: 1

Thomas Cheney
Thomas Cheney

Reputation: 388

border-radius: 50%;

will give you a circle, not just a rounded border. Doing this with non-square elements can have some strange eliptical shapes. Set the values using px or em, or choose a much smaller % to achieve something that still resembles a form field.

Upvotes: 1

prashant
prashant

Reputation: 471

In your case I think you have to enter border-radius in pixels like as follows:

border-radius:5px;

because you gave too much high radius that is why your input box is just looking like a round object & 5px is sufficient in your case.

Upvotes: 2

Related Questions