Why is my :focus not working? I have linked the CSS to the HTML properly, but also the input is not styled as per the stylesheet

Question

This is just an example. I wanted the border of input to be rounded when it is clicked. But it did not happen.

.username {
    border-radius: 0%;
}
.username :focus{
    border-radius: 30%;
}

<input class="username" type="text" placeholder="Username or Email">

Answer 1

For me, getting rid of the space worked. Change: .username :focus {} to .username:focus {}

Answer 2

Get rid of the space between username and focus. .username:focus{} the pseudo may be :active actually.

.username:active {
   color: red;
}

Answer 3

I think your answer is like this.

    .username {
        border: 2px inset;
        border-radius: 0px;
    }
    .username:focus {
        border-radius: 10px;
        outline: none;
    }

<input class="username" type="text" placeholder="Username or Email">