Border-radius cancels out background color

**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! :slight_smile: **

**

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

Hey @pedersongw,

It looks like you forgot to end your statement for background-color with a semi-colon ;

Hope this helps!

I could literally cry! THANK YOU SO MUCH!! i’ve never felt so stupid in my life, I spent hours fighting with this. Thank you thank you thank you.