Unwanted glassy border outside of background images

I'm using Django, HTML and CSS to build a website to post some pictures, but I'm fairly new. I'm using a <div> with backgound-image style to load picture on a website. For some reason, every picture is loaded with some border radius (even though I don't have any in my CSS) and it has this weird glassy-looking border, some of the pictures also have a black line among some of the borders. Here is how it looks like.

My html file:

<div class="container">
<div class="photo-grid">
    {% for i in image|dictsort:'pub_date' %}
        {% if i.is_tall == True and i.is_wide == False %}
            <div class="card" style="background-image:url('{{i.image.url}}')">
                 {{i.title}}
            </div>

My CSS file:

.container {
   display: flex;
   justify-content: center;
   justify-items: center;
 }
.photo-grid {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   grid-auto-rows: 240px;
   margin-top: 75px;
   margin-bottom: 3vw;
   width: 1500px;
}
.card {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }

I have no idea what could be wrong with it. I tried deleting random lines of CSS, but nothing seemed to be working.

Back to Top