Rounding corners code not working
Show it to us so we can see why it’s not working
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<style>
form {
text-align: center;
background-color: yellow;
margin: 150px;
margin-top: 10px;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
button {
background-color: green;
}
div {
border-radius: 10px;
}
name {
border-radius: 10px;
}
</style>
<div class= "container">
<form id = "survey-form">
<h1 id = "title">Favourite Resort Survey</h1>
<p id = "description">The most popular holiday destinations 2021</p>
<br><br>
<label>name</label>
<input id="name" type="text" placeholder="ENTER NAME">
<br><br>
<label>email</label>
<input id = "email" type="email" placeholder="ENTER EMAIL">
<br><br>
<label>number</label>
<input id = "number" type="number" placeholder="ENTER PHONE NUMBER">
<br><br>
<select id = "dropdown">
<option value="" selected ="selected">Select</option>
<option value="#s1">Barbados</option>
<option value="#s2">Antigua</option>
<option value="#s3">Lanzarote</option>
<option value="#s4">Bali</option>
<option value="#s5">Gallapagus</option>
<option value="#s6">Miami</option>
</select>
<br></br>
<label for = "Beach/Country">
<input type="radio" name="Beach/Country">BEACH
<br></br>
<input type="radio" name="Beach/Country">COUNTRY
</label>
<br></br>
<textarea> Any further notes</textarea>
<br></br>
<button>SUBMIT</button>
</form>
</div>
Try adding a border-radius property to the CSS of the item that you want to have rounded corners. Example border-radius: 6px
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.