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