CSSで要素の周りに半透明のボーダーをつける方法

完成形はこのようになります

HTMLの記述はこちら

<div class="sampleBoxA">
	<h2 class="sampleTitle">サンプルタイトル</h2>
</div>

CSSの記述はこちら

▼ パソコン

.sampleBoxA {
 width: 80%;
 margin: 0 auto;
 background-color: gray;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 500px;
}

.sampleBoxA .sampleTitle {
 /*要素周りの半透明のボーダー*/
 border: 20px solid rgba(255, 255, 255, 0.4);
 /*背景の基準がpadding内になります。*/
 background-clip: padding-box;
 background-color: #fff;
 padding: 30px 40px;
 font-size: 42px;
}

▼ スマホ

.sampleBoxA {
 width: 80%;
 margin: 0 auto;
 background-color: gray;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 180px;
 }
 
.sampleBoxA .sampleTitle {
 /*要素周りの半透明のボーダー*/
 border: 20px solid rgba(255, 255, 255, 0.4);
 font-size: 22px;
 /*背景の基準がpadding内になります。*/
 background-clip: padding-box;
 background-color: #fff;
 padding: 3%;
 }

解説はこちら

「sampleBoxA」の背景を濃いグレーに指定。
サンプルタイトルに「border: 20px solid rgba(255, 255, 255, 0.4);」をつけてあげましょう（これが要素の周りのボーダーになります）。

サンプルタイトルの背景色を白にしたいので、「background-color: #fff;」に。
背景色の範囲を決めたいのでpaddingを指定します。
→ pc「padding: 30px 40px;」、sp「padding:3%;」

ここがポイントなのですが、サンプルタイトルに「background-clip: padding-box;」を指定。
すると背景の基準がpadding 内になります。
この状態でborderを指定する事で半透明のボーダー(border: 20px solid rgba(255, 255, 255, 0.4);)が表示されます。