本文へスキップ
▢

角丸ジェネレーター

border-radiusを視覚的に設計。

preview
連動
形状
単位
半径
px
border-radius: 8px;

楕円モードでは各コーナーに横・縦の2半径を指定できます（border-radius のスラッシュ記法）。フルは pill / 円形ボタン向けの大きな値です。

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

border-radiusジェネレーターは、ボックスの四隅の丸みを視覚的に設計し、短縮形または展開形のCSSをコピーできるツールです。全コーナー連動・個別指定、円形／楕円（横・縦半径）、px・%・remの単位切替に対応しています。 toco.toolsではチェッカーボード上のライブプレビューで変化を確認しながら、none / sm / md / lg / full / organic などのプリセットから素早く始められます。 楕円モードでは CSS のスラッシュ記法（`10px / 20px`）を出力します。値が単純なときは短縮形のみ、非対称や楕円のときは展開形も併記します。

使い方

  1. 連動／個別と単位を選ぶ
  2. スライダーで角丸を調整
  3. プレビューを確認してCSSをコピー

よくある質問（FAQ）

border-radiusジェネレーターとは何ですか？

CSSのborder-radius値を視覚的に作り、コピーできるツールです。

楕円の角丸とは何ですか？

1つのコーナーに横方向と縦方向で異なる半径を指定する形式です。CSSでは `border-radius: 20px / 10px;` のようにスラッシュで書きます。

設定は外部に送られますか？

いいえ。すべてブラウザ内で処理されます。

full プリセットは何に使いますか？

pillボタンや完全な円・カプセル形にするための大きな角丸です。