Border Radiusジェネレーター
CSSのborder-radiusを4つの角ごとに調整し、リアルタイムでプレビューできるツールです。
水平方向の半径
垂直方向の半径
Border Radiusジェネレーターの使い方
スライダーで各角の丸みを調整してください。「すべての角をリンクする」にチェックを入れると、1つのスライダーで全角を同時に変更できます。「詳細モード」では水平方向と垂直方向の半径を個別に設定でき、楕円形の角丸も作成できます。
border-radiusプロパティについて
CSSのborder-radiusプロパティは、要素の角を丸くするために使用します。4つの角(左上、右上、右下、左下)に個別の値を設定できます。さらに、各角について水平方向と垂直方向の半径を別々に指定することで、楕円形の角丸を実現できます。ショートハンド記法では「border-radius: TL TR BR BL / H-TL H-TR H-BR H-BL」のように指定します。
よくある質問(FAQ)
Q. 詳細モードとは何ですか?
A. 通常モードでは各角に1つの値を設定しますが、詳細モードでは水平方向と垂直方向の半径を個別に指定でき、楕円形の角丸を作成できます。
Q. 入力データのセキュリティは?
A. すべての処理はお使いのブラウザ内で完結します。入力データがサーバーに送信されることは一切ありません。