Border Radiusジェネレーター

CSSのborder-radiusを4つの角ごとに調整し、リアルタイムでプレビューできるツールです。

20px
20px
20px
20px

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. すべての処理はお使いのブラウザ内で完結します。入力データがサーバーに送信されることは一切ありません。