どうも、7noteです。今回は一部に角丸をつけたいときの方法を全パターン紹介。

左上だけ

border-radius: 10px 0 0 0 / 10px 0 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;

右上だけ

border-radius: 0 10px 0 0 / 0 10px 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-right-radius: 10px;

右下だけ

border-radius: 0 0 10px 0 / 0 0 10px 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-right-radius: 10px;

左下だけ

border-radius: 0 0 0 10px / 0 0 0 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-left-radius: 10px;

上だけ（左上と右上）

border-radius: 10px 10px 0 0 / 10px 10px 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;

右だけ（右上と右下）

border-radius: 0 10px 10px 0 / 0 10px 10px 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;

下だけ（右下と左下）

border-radius: 0 0 10px 10px / 0 0 10px 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

左だけ（左上と左下）

border-radius: 10px 0 0 10px / 10px 0 0 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;

円（正方形なら正円になる）

border-radius: 50%;

ベンダープレフィックスについて

最新の2023年時点では、各種ブラウザに対応させるためのベンダープレフィックスですが、border-radiusには必要ないとされているようです！

参考（https://qiita.com/amamamaou/items/42197e443134478befaf）

まとめ

覚え方は、左上から時計回りで覚えます。

左上→右上→右下→左下

おそまつ！