Rounded border - text input css [closed]

Question

How can I add rounded borders to my text-type input?

For example:

I've tried css3 border but it gives a bad result.

Update: JS Solution: I'm still hoping to find a pure CSS-on-the-input solution, but here's the workaround I'll use for now. Please note this is pasted right out of my app so isn't a nice, stand-alone example like above. I've just included the relevant parts out of my large web app. You should be able to get the idea. The HTML is the input with the "link" class. The large vertical background position is because it's a sprite. Tested in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. I need to tweak the background position a couple of pixels in some browsers still.

Answer 1

input[type=text]{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
     border-radius: 20px;
     border: 1px solid #2d9fd9;
     color: #a0d18c;
     width: 250px;
     height: 30px;
     padding-left: 10px;
    }
    
input[type=text]:focus {
     outline: none;
     border: 1px solid #a0d18c;
     color: #2d9fd9;
}

<input type="text" placeholder="Enter search text...">

Answer 2

You want to look at border-radius (see here for further information)

The border-radius CSS property allows Web authors to define how rounded border corners are.

Fiddle

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