Search code examples
htmlcssborder

Borders are not showing in css


I'm making a site and I'm making a message box. The borders in the message box aren't working properly (they aren't showing)

The code I had created for this is:

CSS

#LoginMessage {
    box-sizing: border-box;
    background-color: #7a2310
    border: 1px solid #f00
    border-radius: 20px;
    padding: 0 14px;
}

HTML

<p id="LoginMessage"></p>

<script>
    var UToP = {"User1": "Password","User2": "Password"}
    function login() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        const paragraph = document.getElementById("LoginMessage");
        keys = [];
        for(var key in UToP) {
            keys.push(key)
        }
        if (!keys.includes(username)) {
            paragraph.innerHTML = "User: " + username + " does not exist.";
            paragraph.style = "color: orangered;";
        } else {
            if (UToP[username] == password) {
                paragraph.innerHTML = "Logged into user: " + username + " sucessfully.";
                paragraph.style = "color: green;";
            } else {
                paragraph.innerHTML = "Incorrect password for " + username + ".";
                paragraph.style = "color: red;";
            }
            if (password == "") {
                paragraph.innerHTML = "No password entered."
                paragraph.style = "color: red;"
            }
        }
    }
</script>

The console doesn't give any errors, so I don't know what's happening. I also included the border type, so I know that's not the problem. Also, the CSS is working, as when it changes the color property it does change color.


Solution

  • You forgot some semicolons in the CSS part - missing for background-color and border. Should be like:

    #LoginMessage {
        box-sizing: border-box;
        background-color: #7a2310;
        border: 1px solid #f00;
        border-radius: 20px;
        padding: 0 14px;
    }