html - 別の div 内の div の境界半径が重なっています

Question

React、HTML、CSSを使用してこのカードを作成しています

ここに私のコードがあります:

<div className="plan">
  <div className="plan-name">
    <h5>BASIC</h5>
  </div>
  <div className="plan-price">
    <h2>$ 6.99</h2>
    <span>Screen Availabilty Simultaneously</span>
  </div>
  <div className="plan-details">
    <ul>
      <li>
        <span>
          <CheckIcon />
        </span>
        Access to All Library in Unlimited
      </li>
      <li>New Content Monthly</li>
      <li>Available on PC, Smartphones and tablet</li>
      <li>Drawing in Color</li>
      <li>Color in Very High Quality</li>
      <li>Canceable at Any Time</li>
    </ul>
  </div>
</div>

CSS:

.plan {
    border-radius: 25px;
    overflow: hidden;
    background-color: #fff;
}

.plan-name {
    background-color: #3e104f;
    padding: 25px 0;
    border-style: solid;
    border-width: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.plan-price {
    color: #3e104f;
    background-color: #fff;
    padding: 35px 0;
}

.plan-details {
    background-color: #3e104f;
    height: 100%;
    border-radius: 20px;
}

出力：

しかし、すべてのコーナーで、上で強調表示した白い境界線を取得しています。誰が私がどこで間違っているのか教えてもらえますか? それともどこから来ているのですか？どうすれば非表示にできますか?

Answer 1

追加するだけ.plan {overflow: auto;}で私にとってもうまくいきます