css把边框变成圆弧形状

/* 使用 border-radius 属性可以将边框变成圆弧形状 */

/* 示例代码： */
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  border: 5px solid black;
  border-radius: 50%; /* 将元素变成圆形 */
}

/* 如果需要部分圆角，可以指定不同的值 */
.partial-rounded-box {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  border: 3px solid darkgreen;
  border-radius: 20px; /* 四个角的圆角半径都为 20px */
}

/* 还可以分别为每个角设置不同的圆角半径 */
.custom-rounded-box {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  border: 3px solid darkred;
  border-radius: 20px 50px 80px 10px; /* 依次为左上、右上、右下、左下的圆角半径 */
}

解释说明：

• border-radius 属性用于设置元素的圆角边框。
• 当 border-radius 的值为 50% 时，元素会变成一个圆形（前提是宽高相等）。
• 如果只需要部分圆角，可以为 border-radius 设置具体的像素值，如 20px。
• 还可以通过为 border-radius 提供四个值来分别为每个角设置不同的圆角半径。