CSS 角丸 & ブロブ形状ジェネレーター
角ごとに 2 つのパーセント値で楕円の角丸を作ります。プリセットから始めても、値を直接入力してもかまいません。
ブラウザ内でローカルに実行 · border-radius · 楕円形の角 · 不定形プリセット
K
角ごとに 2 つのパーセント値で楕円の角丸を作ります。プリセットから始めても、値を直接入力してもかまいません。
ブラウザ内でローカルに実行ワークベンチが書き出すのは要素ひとつ分の宣言です。border-radius に角ごとの水平半径と垂直半径、そしてプレビューで使う width と height が付きます。ステージは既定で 280 × 220 px のボックスなので、18 % から 50 % への変化がすぐ分かります。
実行ボタンはありません。形状とコード欄は入力のたびに更新されます。[CSS をコピー] はそのブロックをそのままクリップボードへ入れ、[リセット] は角を柔らかく（280 × 220、18 %）に戻します。
カスタム（28 %）、角を柔らかく（18 %）、カプセル型（320 × 160 のボックスで 50 %）は対称で、8 つの値がすべて同じです。ペブル形（290 × 230）と有機的なブロブ（280 × 250）は角ごとに値を変えます。ペブル形は左上 58 / 42、右上 34 / 62 から始まり、輪郭が角丸長方形に見えなくなります。
角ごとに 2 つの % が必要なのは、CSS が角を楕円として描くためです。1 つ目が水平半径、2 つ目が垂直半径になります。書き出しは左上・右上・右下・左下の順で、スラッシュの前に水平、後ろに垂直の並びが続きます。
% の border-radius は要素自身のボックスを基準に解決され、固定のピクセル数ではありません。そのため 1 つの宣言が幅の広いボタンにも小さなアイコンにも使えます。幅と高さの入力欄はそれを示すためのもので、変更するのはプレビューの寸法であり、宣言の半径ではありません。
またブラウザは辺で重なる半径を制限するため、描かれた形が数値より小さく見えることがあります。コード欄には実際に使われた値が表示され、欄を離れた時点で入力値が範囲内に戻るのはそのためです。
生成されるコードは 1 つのブロックです。.rounded-shape に width、height、そして水平 / 垂直の形式の border-radius が 1 行入ります。ベンダープレフィックスやメディアクエリ、追加セレクタはないので、貼り付けてクラス名を変えるだけで使えます。
ツールはページ内だけで動作し、入力値や選択内容がブラウザの外へ出ることはありません。[CSS をコピー] はブロックをコピーし、ステータス行がそれを知らせます。スタイルシートに入れる前に安全に準備できます。