Carousel Slider indicator as circle shape

The problem is: I am trying to bring the image slider in my web page using bootstrap Carousel Slider Indicator, when I am targeting .carousel-indicators button using the

width: 10px;
height: 10px;
border-radius: 50%;

properties, it does not change to rounded circle, it shows as an oval shape, even if I increase the border-radius it shows the same

My expected output

The output I'm getting

Here is my current code

.carousel-inner img {
  height: 130vh;
  object-fit: cover;
}

/* Carousel Indicators Rounded */
.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!-- Carousel Slider -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button"  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" ></button>
    <button  type="button"  data-bs-target="#carouselExampleIndicators"  data-bs-slide-to="2"  aria-label="Slide 3"></button>
    <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4" ></button>
  </div>

  <!-- Carousel Items -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/536/354" class="d-block w-100" alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/536/354" class="d-block w-100" alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/536/354" class="d-block w-100" alt="..." />
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/536/354" class="d-block w-100" alt="..." />
    </div>
  </div>
</div>

Solution

Use the below code to fulfill your requirement. Just change your images to my dummy images and then show your output.

.carousel-inner img {
    height: 130vh;
    object-fit: cover;
}

.carousel .carousel-indicators {
    column-gap: 20px;
}

.carousel.slide .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
    border: none;
    opacity: 1;
    outline: 2px solid transparent;
    outline-offset: 5px;
}

.carousel.slide .carousel-indicators .active {
    outline-color: #ffffff;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <!-- Indicators -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
    </div>
    <!-- Carousel Items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/200/300" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/300/300" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/400/300" class="d-block w-100" alt="..." />
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/500/300" class="d-block w-100" alt="..." />
        </div>
    </div>
</div>