Rounding corners?

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.