边框上带有文字

效果图：

实现代码

样式：

.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:

class="col-md-12 chart-box wrap">
    
class="sbdsjtitle sztitle">社保收支统计
    
class = "circleborder circleborderOne">
    
class = "circleborder circlebordersz">
    
class="bdimg" id="sb_d_1">

.wrap {
	border: 1px solid deepskyblue;
}
.sbdsjtitle {
	width: 100px !important;
	margin-left: 30px;
	padding-left: 10px;
	margin-bottom: 0px !important;
	font-size: 16px !important;
	color: #b9c9f1 !important;
	border-bottom: 0px !important;
}

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

.circleborderOne {
	margin-top: -15px;
	margin-left: 21px;
}
.circlebordersz {
	margin-top: -21px;
	margin-left: 145px;
}