Border Radiusジェネレーター

CSSのborder-radiusをインタラクティブに生成することができるジェネレーター。

構成
全て
px
左上
px
右上
px
右下
px
左下
px
出力

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