Bottom Border not Working in this CSS/HTML code

I am currently learning Web Development and I'm currently on the CSS part, then I wanted to add a border to the bottom, and the border isn't rendering. I tried to look for a lot of solutions but it doesn't seem to work I would be really glad if someone helped me out with this.

<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="card borderblue">
            <div class="borderblue">
                <img class="avatar" src="images/traffy.jpg" alt="Trafalgar Law from the Series One Piece">
            </div>
            <div class="borderblue">
                <h3>Trafalgar D. Water Law</h3>
                <p>Surgeon of Death</p>
                <h4>Devil Fruit:Ope Ope no Mi</h4>
            </div>
        </div>
    </body>
</html>

body {
margin: 20px;
    
}

.avatar {
    width: 150px;
}

.card {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    padding: 20px;
    display: flex;
    justify-content:  space-around;
    text-align: center;
    background: #ddebf8;
    color: #2b2839;
    border-bottom:10px solid #a491f1;
    /*
    black - #2b2839 (the text color)
    blue - #ddebf8 (card color)
    purple - #d8cefe (border color)
    */

}

.borderblue{
    border: 1px dotted blue;
}

Solution

Right now you have the .borderblue class applied to your .card div. Because that class appears last in your css, it will be the one that is applied to your card div, overriding the border-bottom you currently have.

Depending on the effect you're going for, you can either move the borderblue class before the .card class in your css. This will put the 10px bottom border on, as well as the dotted border around the rest of the card.

Or, you can remove the borderblue class from the div that is on your card. This will also produce the bottom border, but will remove the dotted from around the rest of the card.