**When I try to add in a border radius for my div id=“form” in my style sheet it cancels out the background color. Nothing seems to change this. When I inspect it in dev tools it puts a line through both border radius and background color and says invalid value, as if the both cannot be applied simultaneously. Everything I google implies this shouldn’t be a problem at all. i’d really appreciate any help! **
**
<html>
<head>
<title>freeCodeCamp Survey Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');
html {
background: url("https://res-3.cloudinary.com/fieldfisher/image/upload/c_lfill,g_auto/f_auto,q_auto/v1/sectors/technology/tech_neoncircuitboard_857021704_medium_lc5h05");
background-size: cover;
font-family: Roboto;
background-attachment: fixed;
}
body {
height: 100%;
}
h1 {
text-align: center;
color: rgb(244, 245, 248);
padding-top: 6%;
font-size: 2.25em;
}
.title {
margin-top: 15px;
margin-bottom: 5px;
display: block;
}
#description {
text-align: center;
color: rgb(244, 247, 248);
font-style: italic;
}
#form {
padding-top: 20px;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 50px;
margin-top: 5%;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 70%;
background:rgba(57, 42, 122, 0.767)
}
#name, #email, #number, #dropdown, #dropdown2 {
display: block;
width: 100%;
color: grey;
border-radius: 5px;
}
.grouplet {
margin-top: 25px;
}
label, #radio-title {
color: white;
font-size: 1.3em;
}
input, textarea, select {
min-width: 1.5em;
min-height: 2em;
vertical-align: middle;
font-family: inherit;
}
.input {
display: block;
margin-right: .5rem;
vertical-align: middle;
height: 100%;
}
.input-label {
display: flex;
align-items: center;
margin-bottom: .5rem;
}
#dropdown, #dropdown2 {
font-family: Roboto;
}
.clue {
font-family: Roboto;
color: white;
font-size: 1rem;
margin-left: 5px;
}
textarea {
width: 100%;
height: 7em;
}
button {
font-family: Roboto;
}
.submit {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
<div id="form">
<form id="survey-form">
<section>
<div class="text-input"><label class="title" id="name-label">Name</label><input id="name" type="text" placeholder="Enter your name" required></div>
<div class="text-input"><label class="title" id="email-label">Email</label><input input type="email" id="email" type="text" placeholder="Enter your email" required></div>
<div class="text-input"><label class="title" id="number-label">Age<span class="clue">(optional)</span></label><input id="number" type="number" placeholder="Enter your age" min="0" max="99" required></div>
</section>
<div><label for="dropdown1" class="title">What option best describes your current role?</label></div>
<div>
<select id="dropdown" name="Select current role">
<option value="select current role" disabled selected>Select current role</option>
<option value="Student">Student</option>
<option value="Full time job">Full time job</option>
<option value="Full time learner">Full time learner</option>
<option value="Prefer not to say">Prefer not to say</option>
<option value="Other">Other</option>
</select>
</div>
<section class="grouplet">
<div id="radio-title" class="title">Would you recommend freeCodeCamp to a friend?</div>
<div><label class="input-label" for="definitely"><input class="input" id="definitely" type="radio" name="recommend?" value="definitely" checked>Definitely</label></div>
<div><label class="input-label" for="maybe"><input class="input" id="maybe" type="radio" name="recommend?" value="maybe">Maybe</label></div>
<div><label class="input-label" for="not-sure"><input class="input" id="not-sure" type="radio" name="recommend?" value="not sure">Not sure</label></div>
</section>
<div><label for="dropdown2" class="title">What is your favorite feature of freeCodeCamp?</label></div>
<div>
<select id="dropdown2" name="favorite feature">
<option value="select an option" disabled selected>Select an option</option>
<option value="Challenges">Challenges</option>
<option value="Projects">Projects</option>
<option value="Community">Open Source</option>
<option value="Full time learner">Full time learner</option>
</select>
</div class="grouplet">
<label class="title" for="checkbox-section">What would you like to see improved?<span class="clue">(Check all that apply)</span></label>
<section id="checkbox-section">
<div><label for="1" class="input-label"><input class="input" type="checkbox" name="improve?" value="Front-end Projects" class="clickable" id="1">Front-end Projects</label></div>
<div><label for="2" class="input-label"><input class="input" type="checkbox" name="improve?" value="Back-end Projects" class="clickable" id="2">Back-end Projects</label></div>
<div><label for="3" class="input-label"><input class="input" type="checkbox" name="improve?" value="Data Visualization" class="clickable" id="3">Data Visualization</label></div>
<div><label for="4" class="input-label"><input class="input" type="checkbox" name="improve?" value="Challenges" class="clickable" id="4">Challenges</label></div>
<div><label for="5" class="input-label"><input class="input" type="checkbox" name="improve?" value="Open Source Community" class="clickable" id="5">Open Source Community</label></div>
<div><label for="6" class="input-label"><input class="input" type="checkbox" name="improve?" value="Gitter help rooms" class="clickable" id="6">Gitter help rooms</label></div>
<div><label for="7" class="input-label"><input class="input" type="checkbox" name="improve?" value="Videos" class="clickable" id="7">Videos</label></div>
<div><label for="8" class="input-label"><input class="input" type="checkbox" name="improve?" value="City Meetups" class="clickable" id="8">City Meetups</label></div>
<div><label for="9" class="input-label"><input class="input" type="checkbox" name="improve?" value="Wiki" class="clickable" id="9">Wiki</label></div>
<div><label for="10" class="input-label"><input class="input" type="checkbox" name="improve?" value="Forum" class="clickable" id="10">Forum</label></div>
<div><label for="11" class="input-label"><input class="input" type="checkbox" name="improve?" value="Additional Courses" class="clickable" id="11">Additional Courses</label></div>
</section>
<label class="title" for="textarea">Any comments or suggestions?</label>
<div><textarea id="textarea" type="text" placeholder="Enter your comment here..."></textarea></div>
<div class="submit"><button id ="submit" type="submit">Submit</button></div>
</form>
</div>
</body>
</html>
**
Google Chrome
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
.
Challenge: Build a Survey Form
Link to the challenge: