css border属性

/* 示例代码：使用 CSS border 属性 */

/* 1. 简单的边框 */
div {
  border: 2px solid black; /* 设置所有四个边框为2像素宽的实线黑色边框 */
}

/* 2. 分别设置每个边框 */
div {
  border-top: 1px dashed red;    /* 上边框为1像素宽的红色虚线 */
  border-right: 2px dotted blue; /* 右边框为2像素宽的蓝色点线 */
  border-bottom: 3px double green; /* 下边框为3像素宽的绿色双线 */
  border-left: 4px groove yellow;  /* 左边框为4像素宽的黄色凹槽效果 */
}

/* 3. 只设置边框颜色和宽度，样式默认为solid */
div {
  border-width: 5px; /* 设置边框宽度为5像素 */
  border-color: purple; /* 设置边框颜色为紫色 */
}

/* 4. 圆角边框 */
div {
  border: 2px solid orange;
  border-radius: 10px; /* 设置圆角半径为10像素 */
}

解释说明：

• border 是一个简写属性，可以同时设置边框的宽度、样式和颜色。
• border-top, border-right, border-bottom, border-left 可以分别设置不同边框的样式。
• border-width 和 border-color 可以单独设置边框的宽度和颜色。
• border-radius 用于创建圆角边框，使元素的边框具有圆滑的效果。