JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <b class="b1"></b>
  <b class="b2 d1"></b>
  <b class="b3 d1"></b>
  <b class="b4 d1"></b>
  <div class="b d1 k">
    css圆角
  </div>
  <b class="b4 d1"></b>
  <b class="b3 d1"></b>
  <b class="b2 d1"></b>
  <b class="b1"></b>
</div>

CSS

.b1,.b2,.b3,.b4,.b{display:block;overflow:hidden;}
.b1,.b2,.b3{height:1px;}
.b2,.b3,.b4,.b{border-left:1px solid #999;border-right:1px solid #999;}

.b1{margin:0 5px;background:#999;}
.b2{margin:0 3px;border-width:2px;}
.b3{margin:0 2px;}
.b4{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
.k {height:100px;}