css写实线和虚线

html

<div class="solid_line"></div>
<div class="dotted-line"></div>

css

.solid_line{
     height: 80px;
     border-left: 3px solid #b2b2b2;
     border-radius: 3px;//实现线两端的圆角
}
.dotted-line{
     height: 80px;
     border-left: 4px dotted #b2b2b2;
}

效果：

横线只需要修改border-left 为border-top或border-bottom