html的圆宽度怎么调整,加个圆角 - 使用border-radius设置圆角

元素边框的圆角效果可以使用border-radius属性来设置。圆角可分为左上、右上、右下、左下。如下代码：

div{border-radius: 20px 10px 15px 30px;}

效果：

也可以分开写：

div{

border-top-left-radius: 20px;

border-top-right-radius: 10px;

border-bottom-right-radius: 15px;

border-bottom-left-radius: 30px;

}

如果四个圆角都为10px;可以这么写：

div{ border-radius:10px;}

如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：

div{ border-radius:10px 20px;}

需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。例如：

div {

width: 200px;

height: 200px;

border: 5px solid red;

border-radius: 100px;

}

效果：

也可以写为百分比50%

div {

width: 200px;

height: 200px;

border: 5px solid red;

border-radius: 100px;

}