Remove div border element for title space

Question

I am trying to achieve this effect below:

How can I get this effect? I want the empty space to adjust to the text. Can anyone give me advice?

.box {
  border: 1px solid black;
  position: relative;
  min-height: 50px;
}

.box__title {
  position: absolute;
  bottom: 16px;
  left: 30px;
}

<div class="box">
<h2 class="box__title">Box title</h2>
</div>

add baground-color white and add maybe same X-paddings to the box__title class or add fieldset > legend Tag — Maik Lowrey, Oct 11 '21 at 14:46

score 6 · Accepted Answer · answered Oct 11 '21 at 14:36

6

You can use the <fieldset> and <legend>tag.

<fieldset>
    <legend>Box Title</legend>

    <h1>More stuff here!</h1>
</fieldset>

answered Oct 11 '21 at 14:36

SecretTimes

381
1
11

Thanks, this is what I wanted. Will accept your answer in 5 min. – bananaEater Oct 11 '21 at 14:37

score 1 · Answer 2 · answered Oct 11 '21 at 14:33

1

Ya you can add a background color and some left and right padding to your box title

.box {
  border: 1px solid black;
  position: relative;
  min-height: 50px;
}

.box__title {
  position: absolute;
  bottom: 16px;
  left: 30px;
  background: #fff;
  padding: 0 5px;
}

<div class="box">
<h2 class="box__title">Box title</h2>
</div>

answered Oct 11 '21 at 14:33

zgood

11,401
2
22
26

the thing is I will have a texture as a background color, so I cant add just white background. Possible to add "empty" background? – bananaEater Oct 11 '21 at 14:34
well then see if the answer from SecretTimes works for you – zgood Oct 11 '21 at 14:37

Remove div border element for title space

2 Answers2