Can't change Bootstrap 5 carousel indicator border radius

user_4784189 0
Viewed 369

I'm using carousel component of Bootstrap 5.1. I realized that no matter what i do i cannot add border-radius to the carousel indicators. They are always rectangle and not accepting border radius. But in inspector it curiously shows indicators (html buttons) do have a border radius but not displayed. I'm so confused. I tried to style .carousel-indicators [data-bs-target] in css, added inline border-radius styling in html. None of them worked.

border-radius bootstrap-5 carousel button css
1 Answers

Try

.carousel-indicators [data-bs-target] {
  border-top: none;
  border-bottom: none;
  border-radius: 5px;
  height:6px;
}

The elements have a transparent border which are being styled with a border radius, but can not be seen because they are transparent.

user_79786270
Related