边框上带有文字

效果图：

实现代码

<div class="row wrap" style="margin-bottom: 20px; ">
　　<p class = "circleborder circleborderOne"></p>
　　<span class="wraptitle">社保收支统计</span>
　　<p class = "circleborder circlebordertwo"></p>
　　<div class="col-md-12"> <!--内容-->
　　　　<div class="c_center ysb_center" id="sb_d_1"></div>
　　</div>
</div>

样式：

.wrap{
　　margin-top: 10px;
　　position: relative;
　　border: 1px solid deepskyblue;
　　box-sizing: border-box;
}
.wraptitle{
　　position: absolute;
　　top: -12px;
　　left: 23px;
　　width: 106px;
　　padding: 0 5px;
　　color: #b9c9f1;
　　font-family: "微软雅黑";
　　background-color: #101d2d;
}

.circleborder{
　　display: block;
　　width: 10px;
　　height: 10px;
　　border-radius: 10px;
　　background-color: deepskyblue;
　　border: 1px solid deepskyblue;
}

.circleborderOne {
　　margin-top: -5px;
　　margin-left: 13px;
}

.circlebordertwo {
　　margin-top: -21px;
　　margin-left: 129px;
}

实现边框上带有文字也可以使用 fieldset

eg:

<form>
　　<fieldset>
　　　　<legend>健康信息</legend>
　　　　身高：<input type="text" />
　　　　体重：<input type="text" />
　　</fieldset>
</form>