How to partially hide children that exceed parent css

I have a naive attempt at a react progress/rating component. Id love to add some border radius on the bar elegantly, but the way i have the children currently written you can see extra content exceeding the parent. Is there an elegant solution here or should i redo my implementation? Thanks

import React from "react";

function RatingBar(props) {
  const [rating, setRating] = React.useState(null);
  const [hover, setHover] = React.useState(null);
  const value = props.count || 100;

  return (
    <div className="rating-bar">
      <div className="bars">
        {[...Array(value)].map((bar, i) => {
          const ratingValue = i + 1;
          const color = ratingValue <= (hover || rating) ? "#0991B1" : "#DFDEDD";

          const style = {
            width: "5px",
            height: "100%",
            backgroundColor: color,
          };

          return (
            <div
              className="bar"
              value={ratingValue}
              onClick={() => setRating(ratingValue)}
              style={style}
              onMouseEnter={() => setHover(ratingValue)}
              onMouseLeave={() => setHover(null)}
            />
          );
        })}
      </div>
      <div className="rating-value">{(hover || rating) / 10}</div>
    </div>
  );
}

export default RatingBar;

.rating-bar {
  height: 40px;
  display: flex;
  cursor: pointer;
  gap: 20px;
}

.bars {
  display: flex;
  border-radius: 30px;
  border: solid red 1px;
}

.bar {
  width: 5px;
  height: 100%;
  transition: color 200ms;
}

.rating-value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100%;
}

added a red border to highlight the issue