CSS Border Radius Generator オンライン
シンプル、角ごと、ブロブ形状のCSS border-radiusをライブプレビュー付きで作成。すべてブラウザ内で完結します。
CSS Border Radius Generatorはすべてブラウザ内で完結して動作します。入力した値や生成されたCSSがデバイスの外に出ることはなく、ArrayKitにアップロードされることもありません。
Box Shadow Generatorを開く
Border Radius Generator について
CSS Border Radius Generatorは、そのままスタイルシートに貼り付けられるborder-radius宣言を作成し、値を調整するたびに更新されるライブプレビューボックスを備えています。4つの角すべてを1つの値で丸めるSimpleモード、各角を個別に丸めるPer-cornerモード、デザイナーが有機的で手描き風の形状を作るために使う8値の楕円形式のBlobモードを切り替えられます。px、%、remの単位を選び、値をドラッグしたり、Blobモードで「ランダム化」ボタンを押して手で入力しないような形状を探索できます。ボタン、カード、アバター、ヒーロー用ブロブなど、CSSを確定する前に角丸の見た目を正確に確認したいあらゆるコンポーネントに便利です。即座に視覚的なフィードバックを求めるフロントエンド開発者やデザイナー向けに作られています。すべての処理はブラウザ内でローカルに実行され、スタイルやマークアップはどこにもアップロードされません。
機能
- Simpleモードは1つの値とスライダーで4つの角すべてを丸めます
- Per-cornerモードは左上・右上・右下・左下を個別に設定できます
- Blobモードは有機的な形状のための8値の楕円形border-radiusを生成します
- Blobモードのワンクリック「ランダム化」ボタンで形状を素早く探索できます
- SimpleとPer-cornerの半径にpx、%、rem単位を切り替えられます
- 正方形のライブプレビューは値を変更するたびに即座に更新されます
- ワンクリックでコピーできる状態のCSS宣言
- すべてブラウザ内で完結し、CSSがアップロードされることはありません
Border Radius Generator の使い方
- Simple、Per-corner、Blobのいずれかのモードを選択します
- スライダー、数値フィールド、またはブロブのパーセンテージを調整します
- ライブプレビューボックスがリアルタイムで更新される様子を確認します
- 生成されたborder-radiusのCSS宣言をコピーします
例
入力
all corners 12px
出力
border-radius: 12px;
4つの角がすべて等しい場合、単一のborder-radius値にまとめられます。
よくあるエラーとトラブルシューティング
- ブロブ形状が有機的な形ではなく、単なる角丸長方形に見える。 — 各角の水平方向と垂直方向のパーセンテージを異なる値にしてください。すべての角でHとVの値が同じだと、単純な角丸形状にしかなりません。
- 角ごとのCSSが予期せず単一の値に戻ってしまう。 — これは想定どおりの動作です。4つの角がすべて一致すると、CSS Border Radius Generatorは同じ数値を4回繰り返す代わりに、より短い単一値のショートハンドを出力します。
- パーセンテージの半径が正方形以外の要素で見た目が異なる。 — パーセンテージ指定のborder-radiusは要素自体の幅と高さに対する相対値なので、同じパーセンテージでも横長の長方形と正方形では表示が異なります。実際の要素のアスペクト比で確認してください。
- 非常に小さい要素で角丸が消えてしまう。 — border-radiusは要素の短い辺の半分の長さで上限が設定されるため、小さいボックスに大きなpx値の半径を指定しても、はみ出すのではなくピルまたは完全な円として表示されます。
よくある質問
- CSS Border Radius GeneratorのBlobモードは実際に何を生成しますか?
- 4つの水平方向のパーセンテージ、スラッシュ、そして4つの垂直方向のパーセンテージという、角ごとに1組ずつある8値の楕円形border-radius構文を生成します。これはCSSで手描き風の有機的な形状を作るための標準的な手法です。
- CSS Border Radius Generatorはピクセルの代わりにパーセンテージやremを出力できますか?
- はい。SimpleモードとPer-cornerモードでは単位をpx、%、remの間で切り替えられ、ライブプレビューと生成されるCSSは即座にそれに合わせて更新されます。
- Per-cornerモードが4つではなく1つの値を出力することがあるのはなぜですか?
- 4つの角がすべて同じ値になった場合、ツールは自動的にborder-radiusをより短い単一値の形式にまとめます。これは有効かつ等価なCSSで、スタイルシートをすっきりさせます。
- CSS Border Radius Generatorはデザインやコードをどこかにアップロードしますか?
- いいえ。すべての計算とライブプレビューはブラウザ内でローカルに実行されます。入力した値や生成されたCSSがデバイスの外に送信されることはありません。
- Blobモードの「ランダム化」ボタンは何のためにありますか?
- ワンクリックで8つのブロブのパーセンテージすべてに新しいランダムな値を設定し、各角を手で入力することなく有機的な形状のバリエーションを素早く探索できます。
- 生成されたborder-radiusのCSSはすべてのモダンブラウザでサポートされていますか?
- はい。標準のショートハンド形式と8値の楕円形ブロブ構文は、どちらもCSS Backgrounds and Borders仕様の一部であり、現行の主要ブラウザすべてで動作します。
関連ツール
すべての ArrayKit ツール