タスクの道筋 / 入力から結果へ
CSS の角丸を形作る方法
- 01
単位を選ぶ
「単位」を「ピクセル」または「パーセント」に設定します。ワークスペースはピクセルで始まります。ピクセルは要素のサイズに関係なく一定で、パーセントは要素に応じてスケールします。この相対性が、有機的で非対称な形を可能にします。
- 02
4 つのコーナーを調整する
「左上」「右上」「右下」「左下」を動かします。それぞれ選択した単位で 0〜100 の範囲を 1 刻みで指定できます。4 つとも 24 px から始まり、プレビューカードは変更のたびに再描画されます。
- 03
コーナーを連動・連動解除する
「すべてのコーナーを連動」をオンにしておけば、すべてのコーナーを一度に変更できます。オフにすれば各コーナーを個別に形作れます。トグルの横に書かれているとおり、連動中は 1 つのコーナーを変更すると 4 つすべてが更新されます。
- 04
サンプルの形を試す
「サンプルを読み込む」を押すと、非対称の参照例（左上と右下が 64 px、右上と左下が 12 px、連動なし）が入力されます。カードやアバターで使われる対角のリーフ形です。「リセット」で均一な 24 px のデフォルトに戻ります。
- 05
生成された宣言を確認する
出力は常に時計回りに 4 つの値（左上、右上、右下、左下）を並べるため、貼り付けても各コーナーが明示的なままです。ステータスバッジは「有効な CSS」と表示され、範囲外のコーナーがあると「値を確認」に変わってコピーがブロックされます。
- 06
CSS をコピーまたはダウンロードする
「CSS をコピー」で .rounded-card ルールを 4 値の border-radius 宣言としてコピーするか、「.css をダウンロード」で toolars-border-radius.css として保存します。同じ宣言は画像、ボタン、カード、その他どんな要素にも使えます。