CSS - aplying border-radius to a gif - html

Question

I am trying to style the gif by giving it border-radius. However ther gif is smaller than the column itself so border-radius is aplied only to the right side of the gif. Could anyone help me out in applying it to the left side aswell? I dont want to change the background-size: contain!important; because then I will loose the proportions of the gif.
PS. Snippet breakes the row and the gif is in another row but it doesn't matter in this example.
.half-half-image-text {
padding: 70px 0px;
}
.half-half-image-text h1 {
color: #800000;
}
.half-half-image-text .content {
height: 100%;
display: flex;
align-items: center;
padding: 35px 0px;
}
.half-half-image-text .content p {
font-size: 22px;
}
.half-half-image-text .img {
min-height: 320px;
height: 100%;
border-radius: 10px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="half-half-image-text">
<div class="container" >
<div class="row">
<div class="col-7 col-lg-7" style="padding-right:0">
<div class="content">
<p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
</div>
</div>
<div class="col-5 col-lg-5" style="padding-right:0">
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif" data-gallery="portfolioGallery" class="portfolio-lightbox">
<div class="img customzoom s2" style="background-size: contain!important;box-shadow: none;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif')no-repeat center right;background-size:cover;" alt="Plan rozwoju" title="Plan rozwoju"></div>
</a>
</div>
</div>
</div>
</div>

Answer 1

You could add this style to portfolio-lightbox :
width: 240px;
display: block;
and change min-height:320px; to min-height:240px will solve your problem. Like below :
half-half-image-text {
padding: 70px 0px;
}
.half-half-image-text h1 {
color: #800000;
}
.half-half-image-text .content {
height: 100%;
display: flex;
align-items: center;
padding: 35px 0px;
}
.half-half-image-text .content p {
font-size: 22px;
}
.half-half-image-text .img {
min-height: 240px;
height: 100%;
border-radius: 10px;
}
.portfolio-lightbox {
width: 240px;
display: block;
}
<div class="half-half-image-text">
<div class="container" >
<div class="row">
<div class="col-7 col-lg-7" style="padding-right:0">
<div class="content">
<p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
</div>
</div>
<div class="col-5 col-lg-5" style="padding-right:0">
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif" data-gallery="portfolioGallery" class="portfolio-lightbox">
<div class="img customzoom s2" style="background-size: contain!important;box-shadow: none;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif')no-repeat center right;background-size:cover;" alt="Plan rozwoju" title="Plan rozwoju"></div>
</a>
</div>
</div>
</div>
</div>

Answer 2

Simply use an image tag.
.imgradius {
border-radius: 10px
}
<img class="imgradius" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif"></img>