CSS角丸ジェネレーター

CSS角丸ジェネレーターについて

CSS Border Radius Generatorは、柔らかく丸みを帯びたカードから有機的なブロブ形状まで何でも作り出します。プレビュー上で角のハンドルを直接ドラッグするか、各角を数値で設定できます。すべての角に水平・垂直それぞれ別の半径を指定する8値構文にも対応しています。この2つ目の軸こそが、卵形、葉っぱ形、涙形、ブロブ形を生み出す鍵です。

link-cornersトグルは4つの角すべてを連動させ、古典的な均一な丸みを実現します。リンクを解除すれば、各角が個別に非対称な形状を作れるようになります。rounded、pill、circle、squircle、2種のブロブ、leaf、egg、arch、teardrop、petal、waveという12個のプリセットがこのプロパティの可能性を示し、ランダム化ボタンで新鮮な有機的形状を無限に生成できます。

単位を変更したり、要素とキャンバスの色をデザインに合わせて変えたり、border-radiusの値そのもの、または完全なCSSルールをコピーしたりできます。このツールは100%クライアントサイドで動作し、アップロードは一切ありません。

CSS角丸ジェネレーターの使い方

1. プレビュー上で角のハンドルをドラッグするか、「すべての角をリンク」をオフにして各角を個別に編集します。
2. 有機的なブロブ形状を作るために、角ごとに水平・垂直の半径を設定します。
3. 単位を選び、要素と背景の色を調整して実際のコンテキストでプレビューします。
4. pill、squircle、blob、leaf、teardropなどのプリセットを試すか、ランダム化ボタンを押します。
5. border-radiusの値、または完全なCSSをコピーします。

よくある質問