CSSボーダーラジアスビルダーとは
border-radiusは要素の各角の丸みを制御しますが、4値のショートハンドと8値の楕円構文は混乱しがちです。このツールは、各角を独立して設定し、px、rem、パーセンテージの単位を選択できるようにしてプロパティを視覚化し、CSS宣言を記述する前に効果を確認できます。
クイックアンサー
各角を個別に調整するか均一な値を使用して、任意の要素に角丸を設定します。px、rem、またはパーセンテージの単位を選択し、結果のライブプレビューを確認します。
Last updated: 2026-06-11
制限事項
- ツールは均一および個別の角の半径値を表示します。スラッシュを使用して角ごとに個別の水平および垂直半径を設定する楕円構文はサポートしていません。
- パーセンテージのborder-radius値は要素の寸法に相対的であり、動的なサイズ変更のある要素では予期しない楕円形の角を生じる可能性があります。
- 角丸はデフォルトで子コンテンツをクリップしません。子要素に角丸の境界を超えて広がる背景や境界線がある場合は、親にoverflow: hiddenを追加して丸い境界でクリップを適用します。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 各角の半径値を個別に設定するか、均一モードを有効にしてすべてに1つの値を適用します。
- 使用する単位を選択します：px、rem、またはパーセンテージ。
- 各角を調整するたびにライブプレビューが更新されるのを確認します。
- 生成されたCSS宣言をスタイルシートにコピーします。
主な用途
- border-radiusをボタンの高さより大きく設定してピル型のボタンを作成する。
- border-radius: 50%で円形のアバターとプロフィール画像を作成する。
- 上部の角だけを微妙に丸くし、下部の角は鋭くしたカードの角をデザインする。