How to implement these kinds of style (in pictures below) with HTML & CSS

Question

An area with border outside and on the top there is a title with its own border. The content inside are not important.

And this case:

Thanks! I really don't know how to describe these styles.

Answer 1

Even if the inner content it's not an image, in both case you could use <figure> and <figcaption>, e.g.

Codepen demo

---

Markup

<figure aria-labelledby="figure-1-1" class="f1">
   <figcaption id="figure-1-1">Title of the figure</figcaption>  
   ...
</figure>

<figure aria-labelledby="figure-1-2" class="f2">
   <figcaption id="figure-1-2">Title of the figure</figcaption>  
   ...
</figure>

CSS

.f1, .f2 {
   border: 1px #9bc solid;
   position: relative;
   border-radius: 5px;
   min-height: 100px;
}

.f1 figcaption {
   position: absolute;
   top: 0;
   padding: .25em 1em;
   transform: translateY(-50%);
   left: 30px;
   border: inherit;
   border-radius: inherit;
   background: #fff;
}

.f2 figcaption {
   padding: .25em 1em;
   background: #9bc;
}

---

Final result

Futher readings:

• https://developer.paciellogroup.com/blog/2011/08/html5-accessibility-chops-the-figure-and-figcaption-elements/
• https://dequeuniversity.com/presentations/html5-nfb/figure-figcaption

Answer 2

For the first element one solution is working with absolute position, like this

.pink-element {
  background-color: #fffdfe;
  border: 2px solid #ff5ddc;
  margin-top: 15px;
  padding: 5px 15px 10px ;
  display: block;
  position: relative;
  border-radius: 5px
}

.pink-element--title {
  background-color: #fffdfe;
  border: 1px solid #ff5ddc;
  display: inline-block;
  padding: 5px;
  top: -12px;
  margin: 0;
  position: absolute;
  border-radius: 5px
}

<div class="pink-element">
  <p class="pink-element--title">
    Title Content
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum magna ut pharetra hendrerit. Praesent sed odio nisl. Proin luctus, odio id pretium porta, metus arcu feugiat sem, a cursus purus ipsum rutrum mauris. Nunc elementum arcu ex, sit amet placerat nibh scelerisque in. Nulla at mattis arcu.</p>
 </div>

As for your second element try this:

.grey-element {
  border: 2px solid #4d4d4d;
  margin-top: 15px;
  padding: 10px 15px;
  display: block;
  position: relative;
  border-radius: 5px
}

.grey-element--title {
  background-color: #4d4d4d;
  display: block;
  margin: -10px -15px;
  padding: 5px 15px;
  color: white
}

<div class="grey-element">
  <p class="grey-element--title">
    Title Content
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum magna ut pharetra hendrerit. Praesent sed odio nisl. Proin luctus, odio id pretium porta, metus arcu feugiat sem, a cursus purus ipsum rutrum mauris. Nunc elementum arcu ex, sit amet placerat nibh scelerisque in. Nulla at mattis arcu.</p>
</div>