CSS 上下左右边框属性单独设置，实例在线编辑

上下左右边框属性

如何单独设置CSS边框border的属性呢？比如为某个HTML元素只设置一个上边框，那该怎么设置？这就是本节所要介绍的CSS border的上下左右边框的属性，包括边框样式、颜色和宽度，比如border-top-style、border-bottom-color、border-right-width等，先总结了其中的一部分如下表：

属性	值	描述
border-top-style	边框样式，如solid、dotted等	指定上边框样式
border-right-style	同上	指定右边框样式
border-bottom-style	同上	指定下边框样式
border-left-style	同上	指定左边框样式
border-top-color	边框颜色，rgb值、hex值、hsl值，或预定义的颜色名	指定上边框颜色
border-right-color	同上	指定右边框颜色
border-bottom-color	同上	指定下边框颜色
border-left-color	同上	指定左边框颜色
border-top-width	边框宽度	指定上边框宽度
border-right-width	同上	指定右边框宽度
border-bottom-width	同上	指定下边框宽度
border-left-width	同上	指定左边框宽度

<p class='top1'>单独设置左边框样式</p><br>
<p class='top2'>单独设置上边框颜色</p><br>
<p class='top3'>单独设置右边框宽度</p>

<style>
  .top1{border-left-style:solid;}
  .top2{border-top-style:solid;border-top-color:skyblue;}
  .top3{border-right-style:double;border-right-width:20px;}
</style>

实例代码解析

如上代码，可以发现，在上面的实例中，在单独设置边框属性的时候，不管是要设置边框的宽度，还是边框的颜色，都需要设置边框的样式。其它的属性可以在这个在线编辑器中在线编辑，然后在线运行。

hot：热门