同じ値または個別値を選択
すべての角を同じ値で調整するか、同期を解除して4つの角を個別に設定します。
開発者デザインユーティリティ
Border Radius生成ツール
カード、ボタン、画像、モーダルに使うCSS border-radiusの値をライブプレビューで調整し、省略記法・個別プロパティ・inline styleコードを生成できます。
角ごとの調整
左上、右上、右下、左下の値をそれぞれ設定できます。
ライブプレビュー
設定したradius値がPreview Cardにすぐ反映されます。
CSSコード生成
省略記法、個別プロパティ、inline styleの例をまとめて確認できます。
現在の単位
px
角の組み合わせ
同じ値
上部Radius
24px / 24px
下部Radius
24px / 24px
Radius設定
すべての角を同じ値にするか、各角を個別に調整して目的のUI形状を作成できます。
チェックを外すと、4つの角をそれぞれ別の値に設定できます。
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
一般的なUIにはpx、円形画像やアバターには%がおすすめです。
Live Preview
Border Radius
Preview Card
設定した角丸の値がここにリアルタイムで反映されます。
Top
24px / 24px
Bottom
24px / 24px
Unit
px
おすすめプリセット
よく使うカード、ボタン、画像の形をすばやく適用できます。
基本UI Radius
ボタン / 画像形状
非対称 / アクセント形状
生成結果
以下のコードをCSSファイル、コンポーネントスタイル、またはinline styleで使用できます。
設定を選択してからCSSコード生成ボタンを押してください。
使い方
Radius値を調整
スライダーで値を変更し、px、%、remの単位を選択します。カード、ピルボタン、円形画像、非対称形状のプリセットも使えます。
ライブプレビューを確認
Preview Cardに角丸がすぐ反映されるため、UIに合う形か確認できます。
CSSを生成してコピー
短縮形、個別プロパティ、inline style例を生成し、結果をコピーまたはCSSファイルとしてダウンロードします。
ヘルプ
Border Radius生成ツールはいつ使いますか？
カード、ボタン、画像、モーダル、入力欄など、角を丸くしたUI要素を作成するときに使用します。値を調整しながらプレビューを確認できるため、デザイン作業を効率化できます。
border-radius値の順番
border-radiusの省略記法は、左上、右上、右下、左下の順番で適用されます。
- 1番目の値: Top Left
- 2番目の値: Top Right
- 3番目の値: Bottom Right
- 4番目の値: Bottom Left
おすすめ値
- 小さなボタン: 8px ~ 12px
- 一般的なカードUI: 16px ~ 28px
- SaaS風の大きなカード: 24px ~ 36px
- ピル型ボタン: 999px
- 円形画像: 50%
px、%、remの違い
pxは固定の角丸サイズに適しており、%は円形画像や比率ベースの形状に使います。remはサイトの基本フォントサイズに対して相対的に調整される単位です。
完全な円形画像を作るには？
正方形の画像またはボックスにborder-radius: 50%;を適用すると円形に近い形を作れます。
ピル型ボタンにはどの値を使いますか？
ボタンの高さより十分大きい999pxなどの値を使うと、左右が丸いピル型ボタンを作れます。
4つの角の値が違うとどうなりますか？
斜め形状、吹き出し風カード、非対称画像ボックスなど、通常のカードより個性的なUI形状を作れます。