如何在html中设置圆角边框

1、在HTML中设置圆角边框有两种常见的方式。

2、一种设置圆角的方式是使用图片。把输入框设置为无边框模式，然后显示背景图，背景图里画一个圆角边框即可。

3、另一种设置圆角的方式是设置border-radius属性，border-radius即为圆角边框属性，但是IE9之前的版本是不支持这个属性的。

4、希望对你有帮助。

简单的做法就是把两个框的图片用ps切出来（你两个的小图标不一样，图方便就可以切两个大的输入框背景，就是连图标一起切，要灵活点就单独切开）。假设你的HTML结构是

<ul>

<li>账号：<span><input type="text"/></span></li>

<li>密码：<span><input type="text"/></span></li>

</ul>

把背景图设置到span上面、span的样式设置成display:inline-blockwidth:120pxheight:20px(宽高的设置当然是和你的背景图大小一样)

input的样式把边框和背景设置为none；这样在背景图上就看不出了。

大致思路就是这样。估计你是初学者。还是多看些css的基础知识吧。

你可以用css3的多层背景，把4个圆角图片放到上下左右四个地方，缺点是低版本ie不鸟。

或者嵌套四层div，div宽高都设为一样，每个div上放一个圆角背景：

<div>

<div>

<div>

<div></div>

</div>

</div>

</div>

---