このツールについて
左上、右上、右下、左下の順に角丸を設定するツールです。「4つの角を連動」を有効にすると、1つの角を変更するだけで他の3つにも同じ値が反映され、均一な角丸をすばやく設定できます。
使い方
- 角丸の単位を選び、4つの角に0以上の値を入力します。
- 角丸をそろえる場合は「4つの角を連動」を有効にします。
- プレビューのボックスの形を確認します。
- CSSをコピーするか、設定をリセットして別の形を試します。
使用例
- 10、20、30、40pxは、4つの角をそれぞれ異なる半径に設定します。
- 4つとも20pxなら、border-radius: 20pxと出力できます。
- 左上と右下が10px、右上と左下が20pxなら、10px 20pxと短縮できます。
border-radius: 10px 20px 30px 40px;
border-radius: 20px;仕組みとCSSの解説
border-radiusの4値は、左上から時計回りに適用されます。4つが同じなら1値、向かい合う角が同じなら2値に短縮でき、条件に合う場合は3値にもできます。半径が大きすぎる場合は、ブラウザーがCSSの規則に従って描画可能な範囲に調整します。
主な用途
- カードやボタンの角丸を統一する。
- 左右非対称の角を持つ装飾コンテナーを作る。
- border-radiusの順序と短縮記法を学ぶ。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
4つの角はどの順番ですか？
左上、右上、右下、左下の順で、時計回りに並びます。
「4つの角を連動」はどんな機能ですか？
有効にすると、どの角を変更しても他の3つに同じ値が反映されます。
出力が1つや2つの値になるのはなぜですか？
同じ角の値は標準のCSS短縮記法でまとめられるためです。短く記述しても、4値をすべて指定した場合と同じ結果になります。
大きな半径を指定しても、そのとおりに見えないのはなぜですか？
隣り合う角丸の半径の合計がボックスの寸法を超えると、重なりを防ぐためにブラウザーがCSSの規則に従ってすべての半径を比例縮小します。