ボーダーの上にタイトルを重ねる処理

<div class="caption_box">
  <p class="caption">ボーダーにタイトルを重ねる</p>
  <p>大体そっくりにできたと思うのですがどうでしょうか。<br>あとは色や文字はCSSで変更すればできると思います</p>
</div>

.caption_box {
    position: relative;
	padding: 20px 15px;
    border: 2px solid #f9a1a1;
    border-radius: 5px;
    background-color: #ffebee;
}
.caption_box .caption {
	position: absolute;
    top: -5px;
    left: 0;
    padding: 0px 10px !important;
    transform: translateY(-50%) translateX(2.5rem);
    background: linear-gradient(to bottom, #FFFFFF 70%, #FFFFFF00 30%);
    color: #f15350;
    text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
}
.caption {
	font-size: 2.5rem;
	font-weight: 900;
}
.caption_box p {
    font-size: 1.0rem;
    line-height: 1.5rem;
}