CSS - aplying border-radius to a gif

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>

Does this answer your question? [Border-radius on background-image](https://stackoverflow.com/questions/14353777/border-radius-on-background-image) — rawnewdlz, Nov 02 '21 at 19:48

score 2 · Accepted Answer · answered Nov 02 '21 at 19:53

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>

score 1 · Answer 2 · answered Nov 02 '21 at 19:53

1

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>

answered Nov 02 '21 at 19:53

NVRM

11,480
1
88
87

CSS - aplying border-radius to a gif

2 Answers2