圆角边框 - 文本输入 css

rounded border - text input css

提问by user3083487

how can i add rounded border for my text-type input (as that ![enter image description here] http://i.stack.imgur.com/zig2d.png)

如何为我的文本类型输入添加圆角边框（如此！[在此处输入图像描述] http://i.stack.imgur.com/zig2d.png）

please Show me a solution,how can i do it . thanks!! I've tried css3 border but it give a bad result,so please share with me how to do it

请告诉我一个解决方案，我该怎么做。谢谢！！我已经尝试过 css3 边框，但结果很糟糕，所以请与我分享如何做

Do not pay attention for below

不注意以下

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 pixels in some browsers still:

更新：JS 解决方案：我仍然希望找到一个纯 CSS-on-the-input 解决方案，但这是我现在将使用的解决方法。请注意，这是从我的应用程序中直接粘贴出来的，因此不是像上面这样的一个很好的独立示例。我刚刚从我的大型网络应用程序中包含了相关部分。你应该能够理解这个想法。HTML 是带有“link”类的输入。大的垂直背景位置是因为它是一个精灵。在 IE6、IE7、IE8、FF2、FF3.5、Opera 9.6、Opera 10、Chrome 2、Safari 4 中测试。我仍然需要在某些浏览器中调整背景位置几个像素：

回答by dardar.moh

try this code

试试这个代码

CSS

CSS

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

HTML :

HTML :

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

回答by SW4

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

您想查看border-radius（请参阅此处了解更多信息）

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

border-radius CSS 属性允许 Web 作者定义边框的圆角。

Fiddle

小提琴

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

回答by DOCTYPE HTML

http://jsfiddle.net/eeDAf/

http://jsfiddle.net/eeDAf/

border-radius: 7px;

it is really simple!

真的很简单！