Border Radiusジェネレーター
シンプルまたは複雑な形状のborder-radiusをインタラクティブに生成します。
全て
px
左上
px
右上
px
右下
px
左下
px
border-radius: 12px 12px 12px 12px;
Border Radiusジェネレーターとは？
CSSプロパティのborder-radiusを生成することができるツールです。
リアルタイムに変化するプレビューボックスとスライダーによる直感的な操作でお好みのborder-radiusを簡単に生成することができます。
シンプルなborder-radiusと、より高度な形のborder-radiusの2つの方法で生成することができます。
Border Radiusジェネレーターの使い方
border-radiusを生成する方法を「シンプル」とより高度な形状を生成できる「アドバンスド」から選択できます。
シンプルな生成
スライダーを利用してボックスの四隅に適用するborder-radiusの値を調整することができます。
アドバンスドな生成
スライダーを利用してborder-radiusの値を調整することができるのはシンプルと同様ですが、より複雑な形状のborder-radiusを生成します。
スライダーだと直感的に調整することが難しい場合、プレビューボックスに付いている4つの頂点（○）を直接操作することも可能です。
border-radiusについて
border-radiusについて、より詳しく知りたい場合はMDN Web Docsを参照ください。
border-radius - CSS: Cascading Style Sheets | MDN