I’m creating an ASP.NET MVC project and I’m trying to apply some css to an image.

Project structure

And this is the code:

//Index.cshtml.css
h1 {
    color: green
}

.roundImage {
    border-radius: 50px;
}

#profilePhoto {
    width: 200px;
    margin: 2rem 0;
    border-radius: 50%;
}

//Index.cshtml
<div class="text-center">
    <h1 class="display-4">My name</h1>
    <img class='roundImage' id="profilePhoto" src="~/images/me.jpg" alt="Profile photo" />
</div>

The color of the h1 is being applied but I have tryed both approaches for the img and it did not work. Why is that and how could I fix it?