html - 親の境界半径に基づいて子を切り取る

Question

.container以下のスニペットの例では、要素の最後の子に と同じborder-radiusものを課そうとしています.container。これにより、ホバリング時に最後の子が強調表示されたときに、その背景が親の形状に従います。これは、ピクセルに関して設定したこの特定のケースではかなりうまくいくようです。border-radius

.container {
  display: block;
  width: 10em;
  border: 1px solid #999;
  border-radius: 0 0 20px 0;
  box-shadow: 0.1em 0.1em 0.4em black;
}

.entry:hover {
  background-color: #aaa;
}

.entry:last-child {
  border-radius: inherit;
}

<div class="container">
  <div class="entry">
  First
  </div>
  <div class="entry">
  second
  </div>
  <div class="entry">
  third
  </div>
</div>

ただし、emたとえば の2em代わりにs を使用すると、次の20pxように壊れます。

これは、親の曲率が最後の子の高さよりも高く伸びているためだと思います。実際に変更20pxすると、次の50pxようになります。

したがって、私20pxは幸運であり、border-radius子を親の形に従わせようとする継承の全体的なアプローチは間違っていると思います。実際、 の最後の例では50px、では取得できない2 番目のエントリをトリミングする必要がありますborder-radius。

代わりにどうすればいいですか？