Border wrap around text with a break

Question

I'm not sure the best way to explain this but this image would probably be the most helpful. Can I create a border like this with CSS or do I need to use an image?

Somewhat similar question and answer is here... https://stackoverflow.com/questions/7731310/text-in-border-css-html — Sameer Chamankar, Apr 19 '18 at 17:31
what are your constraints here? Is "This is a" dynamic content, and does the width of the break need to adjust in relation to it? Should the break be a certain width, either fixed or as a percentage of the block? — andi, Apr 19 '18 at 17:46

score 0 · Answer 1 · answered Apr 19 '18 at 17:30

0

You could use a <fieldset> element

fieldset {
  border: 3px solid;
  text-align: center;
}

legend {
  text-align: center;
  padding: 0 20px;
}

<fieldset>
  <legend>This is a</legend>
  #test
</fieldset>

answered Apr 19 '18 at 17:30

Danny

1,083
2
8
12

This isn't a semantic use of the fieldset element; don't do this. – andi Apr 19 '18 at 17:42

score 0 · Answer 2 · answered Apr 19 '18 at 18:04

This solution places the "legend" on top of the top border, to block out the middle portion of it and give the effect you were looking for.

body {background:black;}
.top-border-break {padding:20px 0 0;}
.inner {border:5px solid red; padding:0 20px 20px; text-align:center;}
.legend {background:black; font-size:25px; line-height:30px; text-align:center; color:tan; display:inline-block; padding:0 80px; transform:translate(0, -15px);}
.text {font-size:45px; line-height:60px; color:red;}

<div class="top-border-break">
  <div class="inner">
    <div class="legend">This is a</div>
    <div class="text">#test</div>
  </div>
</div>

Border wrap around text with a break

2 Answers2