Having issues with CSS border-radius

Question

I am adding the following code to my CSS file for my parent div .outertContainer but the border-radius is only affecting the top two corners and not the bottom two corners. I cannot seem to figure it out. Everything else seems to work fine.

   *{
  background-color: white;
  margin: 0;
  padding: 0;
}

.outerContainer{
  position: absolute;
  border-radius: 9px;
  top:23%;
  right: 10%;
  width:30%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}

.input-form-control{
  margin-top: 20px;
  margin-left: 16px;
  width: 80%;
  padding: 16px 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  line-height: 10px;
  font-size: 16px;
}
::placeholder {
  color: #99a3a4;
}
.submit-btn{
  margin-top: 18px;
  margin-left: 17px;
  margin-bottom: 65px;
  border-radius: 4px;
  border: none;
  color: white;
  padding: 13px 20px;
  width: 92%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  
}

The following is the html code:

<div className="LoginPage">
     
        <div className="outerContainer">
                <form name="form">
                    <div className="emailLabelInput">
                        <input type="text" className="login-form-control" name="email" placeholder="Email address"/>
                    </div>
                    <div className="passwordLabelInput">
                        <input type="password" className="login-form-control" name="password" placeholder="Password"/>
                    </div>
                    <div className="form-group">
                        <button className="submit-btn">Log in</button>

                    </div>
                </form>
            </div>
          </div>

Answer 1

Your problem is you have * { background: white; } which makes the background of all the elements white. Since the form is just as large as the outerContainer and does NOT have a border-radius, it effectively covers up the border-radius applied to the outerContainer. So you have two options to fix the problem:

1 — Remove * { background: white; }. This works for the most part except that the two inputs are still positioned in the top left corner of the outerContainer and of course still covering that corner. If you have those positioned a little differently, this would work.

2 — Add padding: 10px to the outerContainer. This will give the outerContainer a little bit of 'breathing room' and keep the form from covering the corners. See the snippet below.

*{
  background:white;
  margin: 0;
  padding: 0;
}

.LoginPage{
  height:100vh;
  width:100vw;
}

.outerContainer{
  padding:10px; /* Added to show radius */
  position: absolute;
  border-radius: 9px;
  top:23%;
  right: 10%;
  width:30%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}

.input-form-control{
  margin-top: 20px;
  margin-left: 16px;
  width: 80%;
  padding: 16px 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  line-height: 10px;
  font-size: 16px;
}

::placeholder {
  color: #99a3a4;
}

#error-message{
  border: 1px solid #ff7f50;
  margin-top: 10px;
  margin-left: 16px;
  width: 80%;
  padding: 16px 24px;
  border-radius: 4px;
  line-height: normal;
  font-size: 15px;
}

.submit-btn{
  margin-top: 18px;
  margin-left: 17px;
  margin-bottom: 65px;
  border-radius: 4px;
  border: none;
  color: white;
  padding: 13px 20px;
  width: 92%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

<div class="LoginPage">
  <div class="outerContainer">
    <form name="form">
      <div class="emailLabelInput">
        <input type="text" class="login-form-control" name="email" placeholder="Email address"/>
      </div>
      <div class="passwordLabelInput">
        <input type="password" class="login-form-control" name="password" placeholder="Password"/>
      </div>
      <div class="form-group">
        <button class="submit-btn">Log In</button>
      </div>
    </form>
  </div>
</div>