CSS border-radiusジェネレーター
ライブプレビュー付きで、CSSの角丸を作ります。各角を調整したり、4つの角をまとめて操作したり、border-radiusの8つの値で有機的な形(ブロブ)も作れます。
使い方border-radiusとブロブのジェネレーター
広告
CSS border-radiusジェネレーター: 用途
4つの角をまとめて、または個別に、pxまたは%で調整すると、形がすぐに変わります。ブロブモードでは、水平と垂直の半径を使って有機的な形を作り、ランダムなバリエーションも生成できます。CSSはコピーするだけで使えます。
使い方
- 角かブロブを選びます。
- スライダーを調整します。
- 生成されたCSSをコピーします。
使うタイミング
- 角丸のボタンやカードを作る。
- 背景用の有機的な形を作る。
- border-radiusの構文を学ぶ。
よくある質問
一部の角だけ丸めるには?
同じ角のオプションをオフにして、各角を調整します。CSSでの順序は、左上、右上、右下、左下です。
有機的な形(ブロブ)を作るには?
ブロブモードを使います。30% 70% 70% 30% / 30% 30% 70% 70% のようなスラッシュ付きの構文を使い、スラッシュの前の値が水平方向の半径、後ろが垂直方向の半径です。
本当に無料?
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール:Tools123は無料です。