CSS border on each side
It works like this:
If the border-style property is set to four values:
border-style: dotted solid double dashed; The
upper border is a dashed line, the
right border is a solid line, the
lower border is a double line, and the
left border is a dashed line.
If the border-style property is set to three values:
border-style: dotted solid double; The
upper border is a dotted line, the
right and left borders are solid lines, and the
lower border is a double line.
If the border-style property is set to two values:
border-style: dotted solid; the
upper and lower borders are dotted lines, and the
right and left borders are solid lines.
If the border-style property is set to a value:
border-style: dotted; all
four sides are dotted
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* 四个值 */
p.four {
border-style: dotted solid double dashed;
}
/* 三个值 */
p.three {
border-style: dotted solid double;
}
/* 两个值 */
p.two {
border-style: dotted solid;
}
/* 一个值 */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<h1>单独的边框</h1>
<p class="four">四种不同的边框样式。</p>
<p class="three">三种不同的边框样式。</p>
<p class="two">两种不同的边框样式。</p>
<p class="one">一种边框样式。</p>
</body>
</html>
