为组合字段集提供边框

Question

I've tried making a fieldset with the react app but it seemed difficult so i managed to make it look like with some css, and now i'm pretty curious about how to border the comlpete box just like this

  <div class="fieldset">
    <div class="legend">Text</div>
    Text2
  </div>

Customised Styles:

  .fieldset{
    width: 200px;
    height: 300px;
    border: 1px solid black;
    padding: 30px;
    margin: 30px;
    position: relative;
  }
  .legend{
    font-size: 45px;
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translate(-50%);
    background: #fff;
  }

Answer 1

this way you can goes near your goal. Hope it's work for you.

 .fieldset{ border: 1px solid black; padding: 30px; margin: 100px 30px 30px; position: relative; font-size: 45px; width: 200px; border-radius: 10px; }.legend{ position: absolute; width: fit-content; top: -74px; left: 0; right: 0; margin: 0 auto; padding: 10px; border: 1px solid #000; border-bottom: 1px solid #fff; border-radius: 10px 10px 0 0; }

 <div class="fieldset"> <div class="legend">Title</div> Content </div>