圆形边框 - 文本输入css

Question

如何为我的文本类型输入添加圆形边框(就像那样![在此输入图像描述] http://i.stack.imgur.com/zig2d.png)

请给我一个解决方案,我该怎么做.谢谢!!我已经尝试过css3边框,但它会给出不好的结果,所以请与我分享如何做到这一点

下面不要注意

更新:JS解决方案:我仍然希望找到一个纯粹的CSS输入解决方案,但这里是我现在要使用的解决方法.请注意,这是粘贴在我的应用程序之外,所以不是一个很好的,独立的例子,如上所述.我刚刚从我的大型网络应用程序中包含了相关部分.你应该能够理解这个想法.HTML是带有"link"类的输入.大的垂直背景位置是因为它是一个精灵.在IE6,IE7,IE8,FF2,FF3.5,Opera 9.6,Opera 10,Chrome 2,Safari 4中测试过.我需要在某些浏览器中调整几个像素的背景位置:

Answer 1

试试这段代码

CSS

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

HTML:

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

Answer 2

你想看看border-radius(见这里了解更多信息)

border-radius CSS属性允许Web作者定义圆角边缘的方式.

小提琴

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

Answer 3

http://jsfiddle.net/eeDAf/

border-radius: 7px;

真的很简单！