enter image description here

It is desirable to maximize the universal solution without crutches)

  • <fieldset><legend><span>Hire us<span></legend></fieldset> for example - LFC
  • How to make the bottom was a gap? I know about the classic fieldset you are talking about - marates

1 answer 1

As an option, remove the border-bottom from the block and add 2 lines using pseudo-elements:

 * { 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>

  • 2
    I already wanted to wait until morning - I thought if no one can I will - user33274
  • @MaksimLensky, everything seems to be simple, though I complicate things with CSS , maybe there is a shorter version - Arthur
  • one
    everything is done flawlessly .... - user33274
  • @ St1myL Cool, thanks! - marates