Is there a way to create a header that overlaps on the top of the border of a box using CSS?

Question

I am trying to achieve something like this:

where my cool text header is overlapping the border around the text

is there a way to do this using css while also keeping the page responsive?

Here's what I got so far,

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .headerContainer {
        display: flex;
        justify-content: center;
        z-index: 1;
        padding-top: 50px;
      }
      .textContainer {
        display: block;
        justify-content: center;
        z-index: 0;
        border: 2px solid;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <div class="headerContainer"><h2>My Cool Text</b></h2></div>
    <div class="textContainer">
      <ul style="list-style-position: inside; text-align: left;">
<br><br>
        <li>My cool list of stuff 1.</li>
        <li>My cool list of stuff 2</li>
    </div>
  </body>
</html>

Thanks all, this is my first foray in Stack Overflow. Let me know if I missed anything!

Is there a way to create a header that overlaps on the top of the border of a box using CSS?

0 Answers0