border-radius

"border-radius" 是CSS中用于设置边框圆角的属性。它可以让元素的边框以圆角的形式呈现，使得元素的外观更加美观。该属性可以指定一个或四个值，分别对应元素四个角的圆角半径。

如果只指定了一个值，表示四个角的圆角半径都相同；如果指定了两个值，第一个值表示左上角和右下角的圆角半径，第二个值表示右上角和左下角的圆角半径；如果指定了三个值，第一个值表示左上角的圆角半径，第二个值表示右上角和左下角的圆角半径，第三个值表示右下角的圆角半径；如果指定了四个值，则分别表示左上角、右上角、右下角和左下角的圆角半径。

值可以是一个长度值（如像素、百分比），也可以是一个相对值（如 em、rem）。如果值为百分比，则相对于元素的宽度来计算。

示例：设置所有角的圆角半径为 10px

div {
  border-radius: 10px;
}

示例：设置左上角和右下角的圆角半径为 10px，右上角和左下角的圆角半径为 20px

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

示例：设置左上角的圆角半径为 10px，右上角和左下角的圆角半径为 20px，右下角的圆角半径为 30px

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

示例：设置所有角的圆角半径为 50%

div {
  border-radius: 50%;
}