html边框圆角化代码

html边框圆角化可以用css中的“border-radius”属性来实现。

1、新建html文档，在body标签中添加一个div标签，然后为这个div标签设置边框，这时默认情况下边框是直角：

2、为div标签设置“border-radius”属性，属性值为圆角半径大小，这时边框的四个顶角都会变成圆角：

3、为div标签设置“border-radius”属性，属性值分别对应边框的左上角、右上角、右下角和左下角，这时可以对每个顶角自定义设置圆角半径：

<ul style="list-style:noneborder:1px #FF0000 solidborder-radius: 4pxwidth:100px">

<li>123456</li>

<li>1231544</li>

</ul>

用这种方法也行，在样式里面加上border-radius: 4px，这个就表示圆角；但这个是html5的标签；

border-radius属性可以实现元素的圆角。如下css可以实现文本框（单行、多行）的圆角：

input[type=text],textarea{border-radius:3pxborder:1px solid #000}

border-radius用法如下：

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

该属性允许为元素添加圆角边框

语法：

border-radius: 1-4 length|% / 1-4 length|%

按此顺序设置每个 radius 的四个值。

如果省略 bottom-left，则与 top-right 相同。

如果省略 bottom-right，则与 top-left 相同。

如果省略 top-right，则与 top-left 相同。

单位一般用px和百分比较多，其他单位也可

---