css圆角边框

/* 示例代码：创建一个具有圆角边框的元素 */

/* 定义一个类名为 "rounded-border" 的样式 */
.rounded-border {
  /* 设置宽度和高度 */
  width: 200px;
  height: 100px;

  /* 设置背景颜色 */
  background-color: #f0f0f0;

  /* 设置边框样式 */
  border: 2px solid #333;

  /* 设置圆角半径，四个值分别代表左上、右上、右下、左下的圆角半径 */
  border-radius: 20px;

  /* 可选：设置内边距 */
  padding: 20px;

  /* 可选：居中对齐文本 */
  text-align: center;

  /* 可选：垂直居中内容 */
  display: flex;
  align-items: center;
  justify-content: center;
}

解释说明：

• border-radius 属性用于设置元素的圆角。你可以通过指定一个或多个值来控制不同角的圆角半径。
• 在这个例子中，所有四个角的圆角半径都设置为 20px，因此每个角都会有一个平滑的圆角效果。
• 如果你只想对某些角应用圆角，可以分别为每个角指定不同的值，例如 border-radius: 20px 10px 20px 10px; 会使得左上和右下角的圆角半径为 20px，而右上和左下角的圆角半径为 10px。