CSS Border Radius生成器 — 角丸を視覚的に設定

border-radiusはCSS要素の角の丸みを制御します。生成器で各角を個別に設定して即座にCSSコードを取得できます。

border-radiusの構文

border-radius: 10pxは4つの角すべてを設定。border-radius: 10px 20px 10px 20pxは左上・右上・右下・左下。border-radius: 50%は正方形の要素を円にします。border-radius: 50px 100pxはピル形状を作ります。

楕円形の角

border-radius: 100px / 50pxは水平半径100px・垂直半径50pxの楕円形の角を作ります。標準のborder-radiusより自由度の高い丸みを帯びた長方形になります。カードコンポーネントとヒーローセクションに人気です。

border-radiusのデザインガイドライン

一貫性がカギ——類似した要素には同じborder-radiusを使用しましょう。Googleのマテリアルデザインは著名なデザイン要素としてborder-radiusを使用。ボタン：真剣なアプリでは4〜8px、遊び心のあるインターフェイスでは20〜50px。カード：ほとんどのユースケースで8〜16px。