要素の角を丸くするスタイル。
左上・右上・右下・左下それぞれに値を設定できる。角を極端に丸くすることで、正円やカプセル型も表現可能。
適用するだけでユーザーへの印象が様変わりする有益なスタイル。 CSS ベースのデザインではまず必須であり、最も効果的なスタイルのひとつと言える。
デモ
注意
- 縦横の比率も別々に設定できるが、すべての角に異なる比率を設定することはできない。
- 古い Android ではアンチエイリアスにジャギーがかかり、汚く見えるかもしれない。
応用例
See the Pen Mr. Border-Radius by Kushal Pandya (@kushalpandya) on CodePen.