HTML CSS 边框单独设置样式

HTML CSS 边框单独设置样式，每一条都不同，代码如下：

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

border-style 属性可以统一设置每条不边框的样式，代码如下：

<style>

/* 四个值 */
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>
<p class="four">四种不同的边框样式。</p>
<p class="three">三种不同的边框样式。</p>
<p class="two">两种不同的边框样式。</p>
<p class="one">一种边框样式。</p>

设置顺序 border-style: dotted solid double dashed;
上边框是虚线
右边框是实线
下边框是双线
左边框是虚线

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！