CSS 边框属性允许指定样式， 元素边框的宽度和颜色。

边框样式 border-style

border-style属性设置边框样式。

• dotted- 定义虚线边框
• dashed- 定义虚线边框
• solid- 定义实心边框
• double- 定义双边框
• groove- 定义 3D 凹槽边框。效果取决于边框颜色值
• idge- 定义 3D 脊状边框。效果取决于边框颜色值
• nset- 定义 3D 插图边框。效果取决于边框颜色值
• outset- 定义 3D 起始边框。效果取决于边框颜色值
• none- 不定义边界
• hidden- 定义隐藏边框

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

单个边样式

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

边框宽度 border-width

border-width属性设置边框宽度。宽度可以设置为特定大小（以 px、pt、cm、em 等为单位）或使用 三个预定义值之一：thin, medium, thick：

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

设置四条边的各个宽度

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

边框颜色 border-color

border-color属性设置边框颜色。

• 名称 - 指定颜色名称，如“red”
• 十六进制 - 指定十六进制值，如“#ff0000”
• RGB - 指定一个 RGB 值，如“rgb（255,0,0）”
• HSL - 指定一个 HSL 值，如“HSL（0， 100%， 50%）”

如果未设置，则继承元素的颜色。

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

四个边框的颜色

p.one { border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */ }

十六进制颜色

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

RGB颜色

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

HSL 值

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

边框简写 border

border属性是以下单个边框属性的简写属性：

• border-width
• border-style（必填）
• border-color

p {
  border: 5px solid red;
}

p {
  border-left: 6px solid red;
}

p {
  border-bottom: 6px solid red;
}

边框圆角 border-radius

border-radius属性设置边框圆角。

p {
  border: 2px solid red;
  border-radius: 5px;
}