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

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 class="form-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" class="text-input"></li>
                <!--email-->
                    <li><label for="email"><b>E-mail</b></label>
                    <input type="text" id="email" name="email" class="text-input" 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 class="button">
                    <button type="submit">Fetch!</button>
                    </li>
                </ul>
        </fieldset>
    </form>
</section>


Solution 1:[1]

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 class="form-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" class="text-input"></li>
                <!--email-->
                    <li><label for="email"><b>E-mail</b></label>
                    <input type="text" id="email" name="email" class="text-input" 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 class="button">
                    <button type="submit">Fetch!</button>
                    </li>
                </ul>
        </fieldset>
    </form>
</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eric Phillips