CSSでborderの上に見出しを重ねたボックスを作る

<div class="caption_box">
  <h1 class="caption">caption</h1>
  <p>Hello World!, content.....</p>
</div>

.caption_box{
  position: relative;

  margin-top: 1em;
  padding: 1em 2em;
  border: 1px solid black;
}

.caption_box .caption{
  position: absolute;
  top: 0;
  left: 0;

  font-size: 1em;
  padding: 0 1em;
  margin: 0;
  background-color: white;
  transform: translateY(-50%) translateX(1em);
}

解説

親要素にborderとposition: relativeを指定します。
子要素にposition: absoluteを指定、配置したい位置に動かします。

左上に配置する場合: top: 0; left: 0;
右上に配置する場合: top: 0; right: 0;

左下に配置する場合: top: 100%; left: 0;
右下に配置する場合: top: 100%; right: 0;

とします。

top: 0; left: 0;と指定するとこうなると思います

この時点ではborderに重なりません。
重ねるにはtransform: translateY(-50%)を指定します。

transformで要素を上に自身のheightの半分動かします。

背景色は親要素に合わせます。
合わせないと、

captionがとても目立ちます

配置位置を変えてみる

右上にcaption

transform: translateY(-50%) translateX(-1em);

translateX(-1em)で左に1emずらす

左下にcaption

transform: translateY(-50%) translateX(1em);

translateX(1em)で右に1emずらす

右下にcaption

transform: translateY(-50%) translateX(-1em);

左上に配置 captionにborderをつける

fieldsetタグ と legendタグ を使う

<form>
  <fieldset>
    <legend>寒色と暖色 どちらが好き？</legend>
    <label>寒色<input type="radio" name="q1"></label>
    <label>暖色<input type="radio" name="q1"></label>
  </fieldset>
</form>

CSSは要りませんがform内で使うことを前提としている気がします
form内に作る場合はdivなどよりも fieldsetを使ったほうがいいと思います。

---

画像と組み合わせる場合

上記の方法はcaption_boxの枠線の上に背景色を合わせたcaptionを配置し、一部枠線を隠して実装していますが、このやり方は画像やグラデーションなどの背景では相性が悪くcaptionが変に目立ってしまいます。

背景に影響されない方法

<div class="caption_box" data-caption="caption">
  画像やグラデーションなどの複雑な背景と一緒に使うことができます
</div>

.caption_box{
  position: relative;

  width: 300px; height: auto;
  margin-top: 0.5em;
  padding: .5em .25em;
  border: 2px solid #000;
  /* 代わりにlinear-gradient()で実装 */
  border-top: none;
  box-sizing: border-box;

  /*  caption用空間を持った枠線を作る calc(captionの左上位置 + captionの幅) */
  background: 
    linear-gradient(to right,
      #000 20px, transparent 20px,
      transparent calc(20px + 6em), #000 calc(20px + 6em)) 0 0 / 100% 2px; 

  background-repeat: no-repeat;
}

/* caption */
.caption_box:before{
  content: attr(data-caption);
  position: absolute;
  top: 0; left: 20px;

  width: 6em; height: auto;

  text-align: center;
  transform: translateY(-50%);
}