.css

@property --p {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

.box {
  --r: 20px; /* ボックスの角丸 */
  --b: 6px; /* ボーダーの幅 */
  --c: #adadad; /* ボーダーのカラー */
  --p: 16px; /* ボックスのパディング */
  --g: 12px; /* コンテンツと枠線のすき間 */
  --o: 10px; /* legendを隅からずらす */
  max-width: 500px;
  padding: var(--p);
  position: relative;
  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: var(--r);
    border: var(--b) solid var(--c);
    clip-path: polygon(0 0, var(--r) 0, var(--r) 50%, calc(100% - var(--r)) 50%, calc(100% - var(--r)) 0, 100% 0, 100% 100%, 0 100%);
  }
  & .caption {
    display: flex;
    margin: calc(var(--b) / 2 - 0.5lh - var(--p)) calc(var(--r) - var(--p)) calc(var(--p) - 0.5lh - var(--b) / 2);
    gap: var(--g);
    &:before,
    &:after {
      content: "";
      border-top: var(--b) solid var(--c);
      width: var(--o);
      margin-top: calc(0.5lh - var(--b) / 2);
    }
    &:after {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
    }
    &:before {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
    }
  }
}

.html

<div class="box">
  <p class="caption">ポラーノの広場</p>
  <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
</div>