Rounded corner problem on mobile small screen

hi
i want to make rounded corners on the left and right side of row.
it works fine on big screen full width.
But on small mobile screen the rounded corners get shifted to bottom and looks wrong.
how can it be corrected ?
i am using bootstrap for responsive.
i want top-left and top-right rounded corner on 1st row and bottom-left and bottom-right with rounded corner on 2nd row on mobile devices.
hope i am explaining it clearly.
thanks
vineet

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
    />

    <style>
      .companies div{padding:10px; border: 1px solid #000; text-align: center;}
.companies div:first-child{border-top-left-radius: 15px;border-bottom-left-radius:15px;}
.companies div:last-child{border-top-right-radius: 15px;border-bottom-right-radius:15px;}
.companies-row{padding: 15px;}
    </style>
  </head>
  <body>
    <!--companies start-->
<div class="row companies-row">
    <div class="container">
      <div class="row companies col-12">
        <div class="col"><img src="https://cdn.pixabay.com/photo/2017/03/16/21/18/logo-2150297_960_720.png" width="100" alt=""></div>
        <div class="col"><img src="https://cdn.pixabay.com/photo/2017/03/16/21/18/logo-2150297_960_720.png" width="100" alt=""></div>
        <div class="col"><img src="https://cdn.pixabay.com/photo/2017/03/16/21/18/logo-2150297_960_720.png" width="100" alt=""></div>
        <div class="col"><img src="https://cdn.pixabay.com/photo/2017/03/16/21/18/logo-2150297_960_720.png" width="100" alt=""></div>
        <div class="col"><img src="https://cdn.pixabay.com/photo/2017/03/16/21/18/logo-2150297_960_720.png" width="100" alt=""></div>
    </div>
    </div>
    </div>
    <!--companies ends-->

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

It all depends on whether you are only ever going to have the 5 elements or whether there is a variable number of elements?

If you only have 5 elements then you can use media queries at the points where the row breaks and select the corners individually on each break point.

That would look like this:


.companies div {
  padding: 10px;
  border: 1px solid #000;
  text-align: center;
}
.companies-row {
  padding: 15px;
}

.companies div:nth-child(odd) {
  border-radius: 15px 0 0 15px;
}
.companies div:nth-child(even) {
  border-radius: 0 15px 15px 0;
}
.companies div:last-child {
  border-radius: 15px;
}

@media screen and (min-width: 426px) {
  .companies.row div {
    border-radius: 0;
  }
  .companies div:first-child,
  .companies div:nth-child(4) {
    border-radius: 15px 0 0 15px;
  }
  .companies div:nth-child(3) {
    border-radius: 0 15px 15px 0;
  }
  .companies div:last-child {
    border-radius: 0 15px 15px 0;
  }
}
@media screen and (min-width: 548px) {
  .companies.row div {
    border-radius: 0;
  }
  .companies div:first-child {
    border-radius: 15px 0 0 15px;
  }
  .companies div:nth-child(4) {
    border-radius: 0 15px 15px 0;
  }
  .companies div:last-child {
    border-radius: 15px;
  }
}

@media screen and (min-width: 576px) {
  .companies.row div {
    border-radius: 0;
  }
  .companies div:first-child,
  .companies div:nth-child(4) {
    border-radius: 15px 0 0 15px;
  }

  .companies div:last-child,
  .companies div:nth-child(3) {
    border-radius: 0 15px 15px 0;
  }
}

@media screen and (min-width: 768px) {
  .companies.row div {
    border-radius: 0;
  }
  .companies div:first-child {
    border-radius: 15px 0 0 15px;
  }

  .companies div:last-child {
    border-radius: 0 15px 15px 0;
  }
}

However if there are a variable number of images or the images are different sizes then I don’t think it will be possible unless you can force an equal width and create a logical stacking strategy.

hi PaulOB

the images are fixed to 5 only.
your code is working fine.
i will modify according to my need.

one more question.
your are using media query for 426px
@media screen and (min-width: 426px)
Do you use this 426px media query for every project.
I was using bootstrap 4 and i searched bootstrap css file.
they start from 576px minimum
Is 426px media query also important ?
thanks
vineet

thanks
vineet

No, that media query is specifically for the task in hand.

This is what the screen looks like at 425px and under.

And if we increase by 1 pixel the layout changes to this.

Screen Shot 2022-06-23 at 12.20.06

There are now 3 across so the corners needed to be changed again.