CSS border-radius生成ツール｜角丸を4方向個別に調整

このツールでできること

4つの角の丸みを個別に調整し、プレビューを確認しながらborder-radiusのCSSコードを生成できます。

使い方

1. 左上、右上、右下、左下の丸みを入力欄またはスライダーで調整します。
2. プレビューで形を確認します。
3. 「CSSを生成」を押します。
4. 「CSSコードをコピー」から結果をコピーします。

入力例・出力例

左上8、右上16、右下24、左下32を指定すると、次のCSSを生成します。

border-radius: 8px 16px 24px 32px;

4か所をすべて20にしても1値へ短縮せず、border-radius: 20px 20px 20px 20px;と4値で出力します。

よくある利用場面

• カードや画像の四隅を別々の丸みにしたCSSを作るとき
• スライダーで形を見ながら角丸値を調整するとき
• 4値のborder-radius記法の順序を確認するとき

処理仕様

• 各値は0〜1000の半角整数で指定し、生成時にpxを付けます。空欄、負数、小数、指数表記、単位付き入力、カンマ、全角数字には対応していません。
• 出力順は左上、右上、右下、左下です。4つが同じ値でも省略せず、常にborder-radius: 左上px 右上px 右下px 左下px;の4値形式で出力します。
• 数値入力とスライダーは同期します。有効な変更はプレビューへ即時反映し、以前の生成結果とコピー可否を無効にします。不正な入力中は最後の正常なプレビューを保持します。
• クリアすると4か所を初期値の24pxへ戻し、生成結果を消去します。
• 楕円半径のスラッシュ構文と、角ごとの個別プロパティには対応していません。

入力データについて

設定、プレビュー、CSS生成はブラウザ内だけで処理され、入力値をToolRollのサーバーや外部サービスへ送信しません。外部ライブラリを読み込まず、Cookie、Web Storage、IndexedDBへ保存する処理もありません。「CSSコードをコピー」を押したときだけ、生成したCSSを端末のクリップボードへ書き込みます。