title: border-radius not working properly on swiper.js carousel container
body: <pre><code>import React, { useState } from &quot;react&quot;;
  import { Swiper, SwiperSlide } from &quot;swiper/react&quot;;
  import SwiperCore, { Navigation, Pagination, Controller, Thumbs } from &quot;swiper&quot;;
  import &quot;swiper/swiper-bundle.css&quot;;
  import &quot;./index.css&quot;;
  
  SwiperCore.use([Navigation, Pagination, Controller, Thumbs]);
  
  function App() {
    const slides = [];
    for (let i = 0; i &lt; 5; i += 1) {
      slides.push(
        &lt;SwiperSlide key={`slide-${i}`} tag=&quot;li&quot;&gt;
          &lt;img
            src={`https://picsum.photos/id/${i + 1}/500/300`}
            style={{ listStyle: &quot;none&quot; }}
            alt={`Slide ${i}`}
          /&gt;
        &lt;/SwiperSlide&gt;
      );
    }
  
    return (
      &lt;React.Fragment&gt;
        &lt;Swiper
          id=&quot;main&quot;
          // thumbs={{ swiper: thumbsSwiper }}
          // controller={{ control: controlledSwiper }}
          tag=&quot;section&quot;
          wrapperTag=&quot;ul&quot;
          navigation
          pagination
          spaceBetween={0}
          slidesPerView={1}
          onInit={(swiper) =&gt; console.log(&quot;Swiper initialized!&quot;, swiper)}
          onSlideChange={(swiper) =&gt; {
            console.log(&quot;Slide index changed to: &quot;, swiper.activeIndex);
          }}
          onReachEnd={() =&gt; console.log(&quot;Swiper end reached&quot;)}
        &gt;
          {slides}
        &lt;/Swiper&gt;
      &lt;/React.Fragment&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>CSS code</p>
  <pre><code>.swiper-container {
    width: 500px;
    border-radius: 15px;
  }
  
  .swiper-wrapper {
    padding-inline-start: 0;
  }
  
  .swiper-pagination {
    bottom: 0;
    padding-bottom: 10px;
  }
  
  .swiper-button-next {
    background-image: url(./images/next.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  
  .swiper-button-prev {
    background-image: url(./images/previous.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  
  .swiper-button-next:after,
  .swiper-button-prev:after {
    content: &quot;&quot;;
  }
  </code></pre>
  <p>border-radius property is not working on swiper-container or any classes in it. If I put it on image tag it does not work properly when viewing next or previous image. Can anyone help me to resolve this issue ?
  here is the link of the project of what I have done till now.
  <a href="https://wizardly-franklin-fdeb17.netlify.app/" rel="nofollow noreferrer">https://wizardly-franklin-fdeb17.netlify.app/</a></p>