clip-path: inset(... round) で角丸の四角形にトリミングするコードを、実物プレビュー付きでコピーできます。
角丸で切り抜くには clip-path: inset(0 round 24px) を指定します。border-radius と違いはみ出した子要素や影も角丸に沿って切れるのが利点です。サムネイルやカードのトリミングに使えます。下にコピペ用コードを用意しました。
.rounded-crop {
clip-path: inset(0 round 24px);
-webkit-clip-path: inset(0 round 24px);
}
.rounded-crop-inset {
clip-path: inset(8% round 16px);
-webkit-clip-path: inset(8% round 16px);
}
inset(8% round 16px) の最初の値が内側の余白（上右下左）です。round の後ろの値で丸みが決まります。round 50% にすると円・楕円に近づきます。微調整は clip-path ジェネレーター の「inset」タイプが便利です。