How do I make the border radius rounded for the form element?-CodePudding

I have been throwing in border-radius: 10px in my CSS into the form-section class, the fieldset, the form. I can't figure out why my border-radius isn't working. The form still has a sharp edge to it. Suggestions?

 <section >
    <form action="formdumpURL" method="POST">
                <fieldset>
                <h2>Get In Touch</h2>
                <p>Take this first step to transforming your relationship with your dog.
                <br>Contact us to find out more about our services.</p>
            <ul id="form-input">
                <!--fname-->
                    <li><label for="fname"><b>Name</b></label>
                    <input type="text" id="fname" name="firstname" ></li>
                <!--email-->
                    <li><label for="email"><b>E-mail</b></label>
                    <input type="text" id="email" name="email"  required></li>
                <!--phone-->
                    <li><label for="phone"><b>Mobile</b></label>
                    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{7}" required></li>
                <!--button-->
                    <li >
                    <button type="submit">Fetch!</button>
                    </li>
                </ul>
        </fieldset>
    </form>
</section>

CodePudding user response：

The below works in isolation, but I'm not sure what other css you are battling with.

If this doesn't work, there may be a specificity issue with other css rules overriding this rule

.form-section fieldset {
    border-radius:10px;
}

<section >
    <form action="formdumpURL" method="POST">
                <fieldset>
                <h2>Get In Touch</h2>
                <p>Take this first step to transforming your relationship with your dog.
                <br>Contact us to find out more about our services.</p>
            <ul id="form-input">
                <!--fname-->
                    <li><label for="fname"><b>Name</b></label>
                    <input type="text" id="fname" name="firstname" ></li>
                <!--email-->
                    <li><label for="email"><b>E-mail</b></label>
                    <input type="text" id="email" name="email"  required></li>
                <!--phone-->
                    <li><label for="phone"><b>Mobile</b></label>
                    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{7}" required></li>
                <!--button-->
                    <li >
                    <button type="submit">Fetch!</button>
                    </li>
                </ul>
        </fieldset>
    </form>
</section>

CodePudding user response：

Add it to the fieldset element.

fieldset {
  border-radius: 20px;
}

<section >
    <form action="formdumpURL" method="POST">
                <fieldset>
                <h2>Get In Touch</h2>
                <p>Take this first step to transforming your relationship with your dog.
                <br>Contact us to find out more about our services.</p>
            <ul id="form-input">
                <!--fname-->
                    <li><label for="fname"><b>Name</b></label>
                    <input type="text" id="fname" name="firstname" ></li>
                <!--email-->
                    <li><label for="email"><b>E-mail</b></label>
                    <input type="text" id="email" name="email"  required></li>
                <!--phone-->
                    <li><label for="phone"><b>Mobile</b></label>
                    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{7}" required></li>
                <!--button-->
                    <li >
                    <button type="submit">Fetch!</button>
                    </li>
                </ul>
        </fieldset>
    </form>
</section>