border-radius not working properly on swiper.js carousel container

Question

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Pagination, Controller, Thumbs } from "swiper";
import "swiper/swiper-bundle.css";
import "./index.css";

SwiperCore.use([Navigation, Pagination, Controller, Thumbs]);

function App() {
  const slides = [];
  for (let i = 0; i < 5; i += 1) {
    slides.push(
      <SwiperSlide key={`slide-${i}`} tag="li">
        <img
          src={`https://picsum.photos/id/${i + 1}/500/300`}
          style={{ listStyle: "none" }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  return (
    <React.Fragment>
      <Swiper
        id="main"
        // thumbs={{ swiper: thumbsSwiper }}
        // controller={{ control: controlledSwiper }}
        tag="section"
        wrapperTag="ul"
        navigation
        pagination
        spaceBetween={0}
        slidesPerView={1}
        onInit={(swiper) => console.log("Swiper initialized!", swiper)}
        onSlideChange={(swiper) => {
          console.log("Slide index changed to: ", swiper.activeIndex);
        }}
        onReachEnd={() => console.log("Swiper end reached")}
      >
        {slides}
      </Swiper>
    </React.Fragment>
  );
}

export default App;

CSS 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: "";
}

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. https://wizardly-franklin-fdeb17.netlify.app/

Answer 1

There is some extra height of .swiper-container from top & bottom.

If you can reduce the height of .swiper-container to the label of images in the slider, and then (only then) can add border-radius: 15px; and overflow: hidden; to .swiper-container , I really hope you could find what you're looking for. Please lemme know if you try this.

Answer 2

尝试将 borderRadius 属性直接添加到图像。

<img style={{ listStyle: "none", borderRadius: "15px"}} src={`https://picsum.photos/id/${i + 1}/500/300`} alt={`Slide ${i}`}/>

Answer 3

测试 !important 方式

  border-radius: 15px !important;