カテゴリー: 開発ツール
CSS border-radius ジェネレーター
角ごとに丸めてその場で確認
角ごとのスライダーを動かして border-radius 宣言をコピーできます。楕円の角を有効にすると、有機的な形を作るスラッシュ構文になります。
出力
border-radius: 12px;
プレビューは生成した値を実際に適用した要素なので、ブラウザが描くものがそのまま見えます。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
border-radius は3つの角を違えたくなるまでは1つの数値に見えますが、そこで短縮記法につまずきます。4つの値は左上から時計回りに並び、スラッシュ形式ではスラッシュの前が各角の水平半径、後ろが垂直半径です。この2つ目の形式こそが、角の丸い箱ではなく有機的に見える柔らかく非対称なシルエットを描きます。ここでは角ごとにスライダーがあり、画像ではなく値を実際に適用した要素が表示され、出力は人が書くように圧縮されます。四隅が同じなら値は4つではなく1つになります。
使い方
- 単位を選び、角ごとに変えたい場合は連動を解除します。
- プレビューが思いどおりになるまで各角を調整します。
- 有機的な形にするなら楕円の角を有効にし、宣言をコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 値の中のスラッシュは何を意味しますか。
- スラッシュより前が各角の水平半径、後ろが垂直半径です。左右で値が違うと四分円ではなく楕円になります。
- パーセントとピクセルのどちらを使うべきですか。
- ピクセルはどの大きさでも同じ曲率を保つので、ボタンやカードに向きます。パーセントは要素に応じて伸縮し、正方形に50パーセントを指定すると円になります。
- 出力が4つより短いのはなぜですか。
- CSS は重複する角をまとめます。このツールも同じで、四隅が同じなら1つ、対角が同じなら2つになります。結果は同じで、記述が短いだけです。