こんな方におすすめ
- カードやボタンの形を作る方
- 角の指定順を学ぶ開発者
開発者デザインユーティリティ
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コード生成ボタンを押してください。
角の順番と単位を確認して角丸CSSを作る
4つの角を連動または個別に調整し、px・rem・%でプレビューします。均一な半径や4値のCSSをコピー・保存できます。
活用場面
- 全体を同じ半径にする。
- 吹き出しのように1つの角だけ小さくする。
入力から結果の確認まで
- 1
px、rem、%から選びます。
- 2
連動中はどの角の操作でも4つを一緒に調整できます。
- 3
別々の値にするには連動を解除します。
- 4
CSSを生成し、その後の変更が反映されることを確認します。
- 5
コピー・保存して実際の要素サイズで検証します。
均一なカード
- 入力
- 4つの角：16・単位：px
- 結果
- border-radius: 16px;
全て同じ値ならメインルールは1値になります。
右下だけ小さく
- 入力
- 左上24・右上24・右下4・左下24・px
- 結果
- border-radius: 24px 24px 4px 24px;
左上から時計回りです。個別プロパティの例も出力します。
remへの換算
- 入力
- 4つの操作値：16・単位：rem
- 結果
- border-radius: 1rem;
16pxを換算基準にします。ルートの文字サイズが20pxなら1remは20pxです。
計算・処理の仕組み
全角が同じなら1値、異なるなら左上・右上・右下・左下の4値にします。px/remモードの操作値は0〜120、%は0〜50です。remでは操作値を16で割り、小数第2位に丸めます。
注意点と制限
- スラッシュで水平・垂直半径を分ける構文は生成しません。
- 50%は長方形では楕円になり、正方形でのみ円になります。
- %への切り替えは数値を引き継いで50以下に収めます。pxから%への寸法換算ではありません。
- プレビューの幅・背景を変える操作はありません。子画像の切り抜きは実際のoverflow設定を確認してください。
データの取り扱い
値はブラウザー内で処理し、アップロードや履歴保存をしません。CSSには選択した半径が含まれます。
参考資料
あわせて使えるツール
- Box Shadow生成
同じ形に影を加えます。
- CSS clamp生成
画面幅で変わる半径を作ります。
よくある質問
1つの角を動かすと全角が変わりますか？
連動中は変わります。個別に調整するには連動を解除してください。
remが操作値そのままにならないのはなぜですか？
値を16で割る設計です。16なら1remとなり、実際の大きさは適用先のルート文字サイズに依存します。
角丸を付けると子画像も切り抜かれますか？
必ずしもそうではありません。必要なoverflowや切り抜き設定は別に指定してください。