角丸ジェネレーター

角丸ジェネレーターとは#

角丸ジェネレーターは、四角の角を整えてCSSを書き出すツールです。標準モードで各角を整えるか、ブロブモードでなめらかな有機体形状を作ります。仕上がった1行はスタイルシートで使えます。

出力はborder-radiusのCSSかTailwindクラスのどちらかです。出力欄の切り替えで選び、そのまま使いたい箇所に貼ります。

使い方#

標準モードで角を整える#

1. 単位をpxか%から選びます。
2. すべての角のスライダーを動かしてプレビューを確かめます。
3. 各角を別々に整えるには「角を一括設定」をオフにします。

ブロブモードで形を作る#

1. 上・右・下・左のスライダーを動かします。各辺のスライダーで、その辺の2つの角を整えます。
2. プレビューのハンドルを直接動かすこともできます。

仕上げ#

出力欄からCSSかTailwindクラスをコピーします。

設定項目#

• 標準：円弧で各角を整えます。単位・一括設定・プリセットはここにあります。
• ブロブ：4本の辺スライダーでバランスの取れた有機体形状を作ります。単位は%固定です。
• 単位：pxは大きさが固定されます。%は要素の大きさに対する割合で、要素に合わせて伸縮します。
• 角を一括設定：オンの間は1本のスライダーでまとめて調整します。オフにすると各角のスライダーが現れます。
• プリセット：正方形・少し丸める・丸み・円形の4種類を1クリックで適用できます。
• アウトライン：元の四角を破線枠で重ねて表示します。
• ハンドル：ブロブモードでプレビューに辺ハンドルを表示し、直接動かせます。

活用シーン#

• ボタンやカードの角をデザインに合わせる。
• スタイルシートに書く前に%の値を試す。
• 円形のアバターを作る。
• 見出しや背景に使う有機的な形を下書きする。

よくある質問#

補足#