2

So I'm trying to create a textbox with rounded corners but I don't know exactly how to go about doing it. I have the HTML and CSS here for what I want so far but I can't wrap my mind around rounding the corners.

Html:

<form action="index.php">
       Textbox <input type="text"/> <br />
        </form>

For right now, all I need is the CSS if it is possible. This is what I have so far of the CSS:

form {
height:50px; width:200px;
}

If this is impossible for CSS to this just say that in the comments but if not, please tell me. Thanks

Improve this question
2

2 Answers 2

Reset to default
2

You could try border-radius, however keep in mind it won't work in all browsers:

input[type="text"] {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Demo: http://jsbin.com/uduyew/1/edit

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Same comment than for lflores' answer
0

You can add rounded corners by adding the following to your css file: 

input {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

I use 3px here as an example - you could easily change that. The higher the number the more rounded the corners. You could also add rounded corners to a single corner like this: 

input {
  -webkit-border-top-left-radius: 3px;
      -moz-border-radius-topleft: 3px;
          border-top-left-radius: 3px;
}

That example would round only the top left corner. Playing with that code you could probably see how easily you could round any specific corner or all of them at once.

Improve this answer

3 Comments

-moz- prefix is for Firefox ... 3.6! IMHO you can safely drop it. Quite the same with -webkit (Saf 4 on desktop, iOS 3.2 and Android 2.1 on mobile).
@FelipeAls While that's true, it's not defined in the scope of the question what's the target browser, and believe it or not, there's quite a lot of outdated people that still use old versions of certain browers...
@darkajax I must support IE6 in my current project so let's talk about outdated browsers still in use ;) but border-radius was one of the first property switched to unprefixed version by vendors, it's a pure styling property (nothing crashes if it isn't there). Rule of thumb: if you don't add CSS3pie as a polyfill for IE8 and lesser versions, then you don't need to bloat your CSS file with these prefixes for this particular property. Marketshare of IE6-8 >> marketshare of browsers that recognize border-radius but only with a prefix

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.