Как реализовать такую рамку на html/сcs?

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  font-family: Arial; 
  background-color: black; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.wrapper { 
  position: relative; 
  margin: 2rem; 
  padding: 2rem; 
  width: 500px; 
  text-align: center; 
  border: 2px solid white; 
  border-bottom: none; 
  color: white; 
} 
 
.wrapper h1 { 
  text-transform: uppercase; 
} 
 
.wrapper p { 
  padding: 1rem; 
} 
 
.wrapper a { 
  position: absolute; 
  bottom: -25px; 
  left: 50%; 
  padding: 1rem; 
  color: white; 
  text-transform: uppercase; 
  text-decoration: none; 
  font-weight: bold; 
  border: 3px solid white; 
  transform: translateX(-50%); 
} 
 
.wrapper::before, 
.wrapper::after { 
  content: ""; 
  position: absolute; 
  width: 30%; 
  height: 2px; 
  bottom: 0; 
  background-color: white; 
} 
 
.wrapper::before { 
  left: 0; 
} 
 
.wrapper::after { 
  right: 0; 
}

<div class="wrapper"> 
  <h1>Lorem Ipsum</h1> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nostrum ad optio, eius nemo, accusamus odit dolor culpa distinctio, beatae eos? Itaque nam magni harum? Pariatur recusandae molestias placeat ut?</p> 
  <a href="#">Button</a> 
</div>