このツールについて
4 つの角をまとめて設定することも、個別に設定することもできます。楕円角を有効にすると各角が水平半径と垂直半径に分かれ、`border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下` という完全な構文が出力され、しずく形や有機的な形状も作れます。パーセント単位では角丸が要素サイズに追随し、50% で楕円になります。
CSS / FRONTEND · ブラウザ内で処理
CSS 角丸ジェネレーター
4 つの角を個別に調整し、楕円角にも対応した border-radius を出力。
px とパーセントの 2 単位、および水平・垂直半径を分けた楕円角構文に対応します。
border-radius: 18px 18px 18px 18px;
簡易形状
簡易形状
単位
4 つの角
操作手順
- px かパーセントの単位を選びます。
- 4 つの角の半径を調整し、非対称にしたい場合は楕円角を有効にします。
- border-radius 宣言をコピーします。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- パーセントの角丸と px の違いは。
- px は固定長のため要素の大きさが変わっても角丸は変わりません。パーセントは要素自身の幅と高さに対する相対値なのでサイズに追随します。常にカプセル型のボタンにしたい場合は、パーセントより 999px のような十分大きい px 値のほうが安定します。
- スラッシュの後ろの値は何ですか。
- スラッシュの前が 4 つの角の水平半径、後ろが垂直半径です。両者が異なると各角が正円ではなく楕円の弧を描き、花びらやしずくのような形状になります。