Creating a border around box that stops at title

Question

I'd like to create a box around some text, with the border stopping at the point of the title. See below for example.

I've found this in an earlier question, but as it's now 10 years old I'm wondering whether it's out of date, or whether there is a better fix.

I've attempted a similar method myself, and am more or less there. I'm curious whether there is a go-to method for achieving this or whether my method is fine.

.welcome-box {
  border: 1px solid #e75d14;
  padding: 0px 20px;
}

.welcome-box h2 {
  margin-top: -18px;
  background-color: #fff;
  display: inline-block;
  padding: 0px 10px;
}

<div class="welcome-box">

<h2>WELCOME</h2>

<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>

</div>

I think this question is out-of-scope for Stack Overflow - you may have more luck over at https://codereview.stackexchange.com/ — Scoots, Mar 06 '18 at 13:13
`
`/`` tags are exactly what you are looking for, see my answer. — zer00ne, Mar 06 '18 at 13:29

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

<fieldset> and <legend> tags do that behavior by default, but the semantics police may be upset if it's used for something other than form controls. Regardless the <fieldset> content categories are more than enough to cover any purpose a <div> is permitted to have.

Demo

* {
  margin: 0;
}

legend {
  text-align: center;
}

legend h2 {
  padding-bottom: 0
}

<fieldset class="welcome-box">
  <legend>
    <h2>WELCOME</h2>
  </legend>

  <p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum
    text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>

</fieldset>

in such case i would consider some complicate border/background with linear gradient but why complicating if there is a sematic element for it +1 — Temani Afif, Mar 06 '18 at 13:34

Creating a border around box that stops at title

1 Answers1

Demo