How to prevent background colour going around the legend tag

Question

I want to style my sign up form in a way that the background colour does not cover the legend tag only the inside of the sign-up form.

For example, this is what I am trying to achieve:

And this is my result:

My current code:

#signupform {
  font-size: 2rem;
  margin: 30px;
  line-height: 50px;
  background-color: #f6f6f6;
}

#signupform legend {
  font-size: 3rem;
}

<section class="subscribe">
  <h2>SUBSCRIBE</h2>
  <p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
  <form id="signupform">
    <fieldset>
      <legend>SIGN UP NOW!</legend>

      <label for="name">Your name:</label>
      <input type="text" name="name" id="name">

      <label for="mail">Email address:</label>
      <input type="text" name="mail" id="mail">
      <button type="button" class="signupbutton">Sign up</button>
    </fieldset>
  </form>
</section>

Answer 1

You have to set the background-color in fieldset

#signupform {
  font-size: 2rem;
  margin: 30px;
  line-height: 50px;
}

fieldset {
  background-color: #f6f6f6;
}

#signupform legend {
  font-size: 3rem;
}

<section class="subscribe">
  <h2>SUBSCRIBE</h2>
  <p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
  <form id="signupform">
    <fieldset>
      <legend>SIGN UP NOW!</legend>
      <label for="name">Your name:</label>
      <input type="text" name="name" id="name">
      <label for="mail">Email address:</label>
      <input type="text" name="mail" id="mail">
      <button type="button" class="signupbutton">Sign up</button>
    </fieldset>
  </form>
</section>