Html 一个div在另一个div内的边界半径重叠

我用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 {margin-top: 25px; overflow: visible;} /* here just remove overflow: hidden to show .plan-name outside of .plan */
.plan-name {margin-top: -25px; border-top-right-radius: 25px; border-top-left-radius: 25px;}

---

使用此代码时，

.plan

的半径隐藏在

.plan name

下面，并且在拐角处不可见。

当前代码不会输出图像中显示的内容。发布完整的演示。好的，等等，我会发布一个codesandbox链接

.plan {margin-top: 25px; overflow: visible;} /* here just remove overflow: hidden to show .plan-name outside of .plan */
.plan-name {margin-top: -25px; border-top-right-radius: 25px; border-top-left-radius: 25px;}