Please see the image below.

contact-image

I want to make a contact container that has a square Contact header. I want the contact header in the middle of the container halfway out of the container. Problem is, both the header and the container have to be transparent and they have borders. The borders of the container cut right through the contact header. I'm having trouble removing the borders from inside the header.

<style>* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 20px;
}

.profile {
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

ul {
  list-style-type: none;
}

li {
  display: inline;
}

.contact {
  margin-bottom: 5px;
}

.container {
  border: 2px solid gray;
}

.contact {
  width: 40%;
  margin-top: -23px;
  border: 2px solid gray;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
}

h2 {
  font-size: 25px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

.container {
  height: 380px;
}

.content {
  width: 400px;
  height: 70%;
  margin: 0 auto;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>

<div >
  <section >
    <div >
      <div >
        <h2>Contact</h2>
      </div>
    </div>
    <div >
      <p >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae distinctio libero repudiandae consequatur qui, vel ad error animi doloremque magni cupiditate officia officiis et? Vel voluptatem reiciendis placeat cumque officiis!</p>
    </div>
    <div >
      <ul>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Behance</a></li>
        <li><a href="#">Instagram</a></li>
      </ul>
    </div>

  </section>
</div>

CodePudding user response：

Just use <fieldset> and <legend>.

the legend is a title in a fieldset and the border of a fieldset will not go through the legend. The legend can be aligned with the margin.

fieldset {
  border: 2px solid black;
  min-height: 50vh;
}

legend {
  border: 2px solid black;
  margin: 0 auto;
  padding: 5px 20px;
}

<fieldset>
  <legend>Contact</legend>
</fieldset>

CodePudding user response：

Adapted from another answer, you could try this instead of border-top:

body {
  background: url('https://picsum.photos/536/354');
  background-size: cover;
}

.header {
  width: 240px;
  border: 4px solid gray;
  height: 50px;
  margin: auto;
  position: relative;
  top: 25px;
  padding: 10px;
  text-align: center;
}

.box {
  width: 350px;
  height: 100px;
  position: relative;
  margin: auto;
  border-left: 4px solid gray;
  border-right: 4px solid gray;
  border-bottom: 4px solid gray;
  padding: 20px;
}

.box:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  top: 0px;
  left: 0;
}

.box:before {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  top: 0px;
  right: 0;
}

<div >
  title
</div>

<div >

  content
</div>