CODEWITHSUNDEEP
htmlcsstextbox
user2272959
user2272959

Reputation:

Is it possible to create a rounded textbox using HTML/CSS?

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

Upvotes: 2

Views: 10377

Answers (2)

DarkAjax
DarkAjax

Reputation: 16223

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

Upvotes: 2

lflores
lflores

Reputation: 3800

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.

Upvotes: 0

Related Questions