1

Here is a simple mock:
enter image description here

I tried to do it with background-image and 5 linear-gradients, but it wasn't very flexible (cannot easily change the size of the hole + cannot create round corners)

john
  • 29
  • 2
  • 5
    Why not use a `fieldset` with a `legend`, with creates that type of look by default? But if you want help with code, you need to share the code you have. – Heretic Monkey Aug 30 '21 at 12:37
  • @HereticMonkey, didn't know this tag exists, thank you! – john Aug 30 '21 at 13:05

2 Answers2

1

Html has this build in using fieldset and legend:

fieldset {
    text-align: center;
    font-size: 25px;
}

legend {
    font-size: 15px; 
}
<fieldset>
    <legend>Title</legend>
    Text
</fieldset>
Luke_
  • 745
  • 10
  • 23
1

There are many ways you can achieve this result.

.wrapper {
  position: relative;
  margin: 20px;
}

section, input {
  border: 1px solid #ccc;
  padding: 1ex;
}

/* Needs reset */
h4, p {
 margin: 0;
}

/* Fieldset */
fieldset {
  border: 1px solid #ccc;
}

/* Generic floating style */
.float {
  position: absolute;
  top: -1.8ex;
  left: 10px;
  padding: 0 10px;
  background: white;
  z-index: 1;
}

/* Single element */
.float-title {
  border: 1px solid #ccc;
  padding: 1ex;
}

.float-title::after {
  content: attr(title);
  position: absolute;
  top: -1.8ex;
  left: 10px;
  padding: 0 10px;
  background: white;
  z-index: 1;
}
<fieldset>
  <legend>Legend of fieldset</legend>

  <div class="wrapper">
    <label class="float" for="input">Floating label</label>
    <input id="input" type="text" placeholder="Requires wrapper" />
  </div>
  
  <section class="wrapper">
    <header class="float">
      <h4>Floating title</h4>
    </header>
    <p>
      Content that requires wrapper
    </p>
  </section>
  
  <div class="wrapper float-title" title="Hover this element">Single element with custom title</div>
  
</fieldset>

Use the one that bests fits what you need.

Gunther
  • 1,297
  • 9
  • 15