角丸ジェネレーター

4 つの角を個別に設定・連動させ、CSS の border-radius をコピーできます。

100% プライベート——すべてブラウザ内で動作

使い方

1
各角の半径を入力するか、「四隅を連動」をオンにします。
2
プリセットを選ぶか、既存の border-radius を貼り付けて編集します。
3
生成された CSS をコピーしてスタイルシートに使います。

使用例

角丸カード

入力

四隅すべて 16px

出力

border-radius: 16px;

上だけ角丸

入力

16px 16px 0 0

出力

border-radius: 16px 16px 0 0;

よくある質問

円にするには？

正方形の要素で四隅を 50% にします。「円」プリセットなら一度で設定できます。

角ごとに形を変えられますか？

はい。40% 20% のような楕円指定も含め、各角に個別の値を指定できます。

上限はありますか？

任意の長さを指定できますが、要素の半分を超える値はブラウザが自動で制限します。

関連ツール

CSS ボックスシャドウ生成スライダーで CSS の box-shadow を調整し、プリセットとプレビュー付きでコードをコピーできます。グラデーション生成ツールCSS の線形・放射状グラデーションを視覚的に作成し、CSS コードをコピー。CSS カラー生成ツールベースカラーから10段階のカラースケールを生成し、CSS 変数として出力。JSON 整形ブラウザで JSON を即座に整形・美化・圧縮・検証。JSON 検証ブラウザー上で JSON を即時に検証し、構文エラーの行・列・位置を正確に特定します。Base64 エンコード/デコードテキストと Base64 をブラウザー上で即時に相互変換。Unicode・絵文字に完全対応。