округлая граница - ввод текста CSS

Question

как я могу добавить округлую рамку для моего текста типа ввода

пожалуйста, покажите мне решение, как я могу это сделать (как, что [введите описание изображения здесь] http://i.stack.imgur.com/zig2d.png!). благодаря!! Я попытался CSS3 границы, но это даст плохой результат, поэтому, пожалуйста, поделитесь со мной, как это сделать

Не обращайте внимание на ниже

Update: JS Решение: Я все еще надеясь найти чистое решение CSS-on-the-input, но вот обходной путь, который я буду использовать сейчас. Обратите внимание, что это вставлено прямо из моего приложения, так что это не приятный, самостоятельный пример, например, выше. Я только что включил соответствующие части из своего большого веб-приложения. Вы должны уметь получить эту идею. HTML - это вход с классом «link». Большое вертикальное положение фона - это спрайт. Протестировано в IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. Мне нужно настроить положение фона на несколько пикселей в некоторых браузерах:

Answer 1

Вы хотите посмотреть в border-radius (see here для получения дополнительной информации)

CSS-свойство границы радиуса позволяет веб-авторам определить, как закругленные углы границы.

Fiddle

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

Answer 2

http://jsfiddle.net/eeDAf/

border-radius: 7px; 

это действительно просто!

Answer 3

попробовать этот code

CSS

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

HTML:

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