Title inside of box outline - CSS, FrontEnd Dev - UX

Question

Help. I am not great at UX. I am creating an app in React and using Material UI for the look. I really want to create something like this:

Where the "Some Title" is a dynamic field from my database as well as the contents. The thing I cannot figure out is what is the best (non skanky) way to add the title into the outline? Thoughts?

Answer 1

You can accomplish this by absolute positioning the title with a negative top margin. The title needs to be display:inline-block with a white background and padding so the border doesn't show through.

.borderd-content {
  border: 1px solid #0000ff;
  border-radius: 4px;
  height: 100px;
  margin-top: 20px;
  position: relative;
}

.borderd-content .title {
  margin: -10px 0 0 10px;
  background: #fff;
  padding: 3px;
  display: inline-block;
  font-weight: bold;
  position: absolute;
}

.borderd-content .content {
  padding: 10px;
}

<div class="borderd-content">
  <div class="title">Title</div>
  <div class="content">asdsad</div>
</div>