如何使表单元素的边框半径变圆？

Question

我一直在 CSS 中将 border-radius: 10px 放入表单部分 class、字段集和表单中。我不明白为什么我的 border-radius 不起作用。形式仍然有一个锋利的边缘。建议？

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

Answer 1

下面的内容是独立工作的，但我不确定你在与其他 css 作斗争。

如果这不起作用，其他 css 规则覆盖此规则可能存在特异性问题

.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>

如何使表单元素的边框半径变圆？

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

html

css

forms

border-radius