css圆角边框代码

/* 设置圆角边框的CSS代码 */

/* 1. 简单的圆角边框 */
.box {
    border: 2px solid #3498db; /* 边框宽度、样式和颜色 */
    border-radius: 10px; /* 圆角半径，值越大越圆 */
    padding: 20px; /* 内边距 */
}

/* 2. 完全圆形的边框（适用于正方形元素） */
.circle {
    width: 100px;
    height: 100px;
    border: 2px solid #e74c3c;
    border-radius: 50%; /* 将元素变成圆形 */
    padding: 20px;
}

/* 3. 不同方向的圆角 */
.custom-corners {
    border: 2px solid #2ecc71;
    border-radius: 25px 5px 25px 5px; /* 左上 右上 左下 右下 */
    padding: 20px;
}

解释说明：

• border-radius 属性用于设置元素的圆角。可以通过一个或多个值来控制不同角的圆滑程度。
• 当 border-radius 的值为 50% 时，且元素的宽高相等时，元素会变成一个完美的圆形。
• 如果你只想对某些角进行圆滑处理，可以分别设置每个角的圆角半径，例如 border-radius: 25px 5px 25px 5px; 表示左上角和左下角是大圆角，右上角和右下角是小圆角。