제목이 외곽 상자에 박힌 테두리 스타일

코드는 다음과 같습니다.
     

$(function(){
	$(".panel_border").each(function(){
	//        
		var $borderPanel = $([
		                      "<div>",
			                      "<div class='my_panel_wrap'>",
			                      "<div class='my_border'>",
				                      "<div class='my_border_left'></div>",
				                      "<div class='my_border_right'></div>",
			                      "</div>",
			                      "<div class='my_title'></div>",
			                      "<div class='my_blank'></div>",
			                      "<div class='my_content'></div>",
			                      "</div>",
		                      "</div>"
		                      ].join(""));
			
			var $this = $(this);
			var title = $this.attr("title");
			var id =  $this.attr("id");
			$borderPanel.find(".my_title").html(title);//       
			$this.replaceWith($borderPanel);//     （$borderPanel）,           （ $(".panel_border") ）
			$borderPanel.find(".my_content").append($this);//             "<div class='my_content'></div>", 
			
			//     （  ）
			var width = $(".my_title").width();
			$(".my_border_right").css("width","calc(92% - "+(parseInt(width)+20)+"px)");
			var lwidth = $(".my_border_left").width();
			$(".my_title").css("margin-left",(parseInt(lwidth)+10)+"px");
		
	});
})

.my_panel_wrap{
	border:1px solid #95B8E7;
	border-top:none; 
	margin-top:20px;
}
.my_title{
	height:20px;
	position: absolute;
  	margin-top: -10px;
  	font-size:14px;
}
.my_content{
 	height: calc(100% - 25px);
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-bottom: 10px;
}
.my_border_left{
   	width: 8%;
    border-top: 1px solid #95B8E7;
    float: left;
}
.my_border_right{
    float: right;
    border-top: 1px solid #95B8E7;
}
.my_blank{
	height:10px;
}

인터넷에서 이런 테두리를 많이 봤는데 느낌이 좋네요. 아쉽게도 코드를 찾지 못해서 대충 썼어요. 사용할 때