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

>Solution :

With the CSS attribute overflow you can set your desired behavior

.bars {
  display: flex;
  border-radius: 30px;
  border: solid red 1px;
  overflow: hidden; /* Add this line */
}

In your case, when you use overflow: hidden; in the .bars class, it means that any child elements of a .bars element that go outside the boundaries of the .bars box will be hidden. So, if the child elements are larger than the parent .bars box, you won’t be able to see the overflowing parts.