How do I round the corners in a WordPress login page?

Question

I am using the Custom Login Page Customizer plugin in my WordPress site and it made a very nice plugin page. With CSS I am able to round the corners of my logo but I cannot figure out how to round the corners of the login form. Everything else on the site has rounded corners. The following CSS is what I have tried but it isn't working. For some reason, only the border specification line gets included in the CSS in the header of the rendered page and the border-radius is left off. The HTML is created by the plugin's settings. I asked this in their support forum 4 weeks ago and have not gotten an answer. I am hoping someone here can help me. Thanks.

CSS

/*--------------------------------------------------------------
7.1 Login form
--------------------------------------------------------------*/

.login #login form#loginform {
    border: 5px double #999 !important;
    border-radius: 16px !important;
}

#login ul.square {
    color: #fefdff !important;  /*----Splashed white ----*/
    background-color: transparent;
    margin: 0 0 0 22px;
    padding: 0 0 0 22px;
    }

#login ul.square li {
    color: #fefdff !important;  /*----Splashed white ----*/
    background-color: transparent;
    list-style: square outside !important;
    margin: 0 0 0 10px;
/*  padding: 1em 0 0.3em -1em !important; */
    padding: 3px 5px !important;
    }

#login p#backtoblog a:link {
    color: #2662ef;    /*  Bright blue  */
    background-color: transparent;
    font-size: 90%;
    font-weight: 400;
}

#login p#backtoblog a:hover, #login p#backtoblog a:focus {
    color:#ddff22;    /*  vivid yellow  */
    background-color: transparent;
    font-size: 90%;
    font-weight: 400;
}

#loginform {
    border-radius:16px;
}

#login .loginform {
    border-radius:16px;
}

HTML

    <div id="login">
        <h1><a href="https://botanical-art.baeecorp.org" title="Botanical Artists for Education &amp; the Environment (BAEE)" tabindex="-1">Botanical Artists for Education &amp; the Environment (BAEE)</a></h1>

<form name="loginform" id="loginform" action="https://botanical-art.baeecorp.org/wp-login.php" method="post">
    <p>
        <label for="user_login">Username or Email Address<br>
        <input name="log" id="user_login" class="input" value="" size="20" type="text"></label>
    </p>
    <p>
        <label for="user_pass">Password<br>
        <input name="pwd" id="user_pass" class="input" value="" size="20" type="password"></label>
    </p>
        <p class="forgetmenot"><label for="rememberme"><input name="rememberme" id="rememberme" value="forever" type="checkbox"> Remember Me</label></p>
    <p class="submit">
        <input name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" type="submit">
        <input name="redirect_to" value="https://botanical-art.baeecorp.org/wp-admin/" type="hidden">
        <input name="testcookie" value="1" type="hidden">
    </p>
</form>

Answer 1

I discovered the answer to my question is in the customization settings for the Custom Login Page Customizer plugin. CSS to customize the plugin had to be put into the plugin's Custom CSS box and not in the WordPress Additional CSS panel. I had used the WordPress Customizer's Additional CSS panel to try several things suggested in answers and comments to this question but they weren't the solution. I also installed an additional plugin that did many many things including rounding the login box (but that was all I needed it to do). I decided I didn't want one more fat plugin just to edit a plugin. I deleted that additional plugin and investigated the Custom Login Page Customizer plugin's settings and found the answer.

In the WordPress Customizer, navigate to the "Login Customizer" menu. In the Login Customizer menu, navigate to the "Other" menu item at the bottom of the Login Customizer menu. This Other menu item has a box for Custom CSS. I removed some new CSS I'd put into the WordPress Customizer's Additional CSS panel that had not worked, and pasted it into the box for Custom CSS in the Login Customizer's Other menu:

form#loginform, form#lostpasswordform, form#resetpassform, form#registerform {
    -moz-border-radius: 16px !important;
    -webkit-border-radius: 16px !important;
    -ms-border-radius: 16px !important;
    -o-border-radius: 16px !important;
    border-radius: 16px !important;
    padding: 20px;
    overflow: hidden;
}

dl.login-hello dt {
    color: #fefdff !important;  /*----Splashed white ----*/
    background-color: transparent;
    font-size: 100%;
    font-weight: normal;
    margin: 0 0 0.4em 0;
}

dl.login-hello dd {
    color: #fefdff !important;  /*----Splashed white ----*/
    background-color: transparent;
    font-size: 98%;
    font-weight: normal;
}

dl dd:before {
    content: " \2014 "  ;
    font-style: oblique;
    margin: 0;
    padding: 0;
    }

After saving that in the Custom CSS in the Login Customizer, the login form had rounded corners.