border

border（边框）

属性	含义	属性值	备注
border-width	边框粗细	thin 细线、medium 默认、thick 粗线	主要使用绝对单位。如 px
border-style	边框风格	solid - 定义实线边框、dotted - 定义点线边框、dashed - 定义虚线边框、等	未定义 border-style,其他 border 属性将不起效果
boder-color	边框颜色	transparent（表示透明颜色）	如果未设置 border-color，则它将继承元素的颜色。
border-radius	圆角边框
border-collapse	控制单元格的边框
border	简写		按照顺序书写，所有参数缺一不可

div {
  /* 设置所有边框宽度 */
  border-width: 1px;
  /* 上下，左右 */
  border-width: 10px 20px;
  /* 上,左右，下 */
  border-width: 10px 5px 3px;
  /* 上，右，下，左 */
  border-width: 10px 50px 5px 10px;
}

div {
  /* 设置边样式 */
  border-style: solid;
  border-style: dotted;
  border-style: dashed;
  border-style: double;
}

div {
  /* 设置边框颜色 */
  border-color: aquamarine;
  /* 上，右，下，左 */
  border-color: red green blue yellow;
}

div {
  /* 只设置左边边框的样式 */
  border-left: 1px solid aquamarine;
  /* 设置所有边框的样式 */
  border: 1px solid black;
}

div {
  /* 圆角矩形的圆弧为最圆状态（等价于高度和宽度的一半） */
  border-radius: 50%;
  border-radius: 10px;
  /* 左上，右上，右下，左下 （顺时针） */
  border: 25px 25px 25px 25px;
  /* 左上 ，右上左下 ，右下 */
  border: 25px 25px 25px;
  /* 左上右下，右上左下（对角） */
  border: 25px 25px;
  /* 左上 */
  border-top-left-radius: 25px;
}

添加边框会影响盒子的实际大小！

如果需要盒子大小和效果图一致，可以使用 width 和 height 减去 border 影响的大小
也可以使用 box-sizing:border-box;属性