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

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

.username:active {
   color: red;
}