border-radius生成ツール
4隅個別や楕円(8値)のborder-radiusをスライダー・ハンドルで調整し、ライブプレビューを見ながらCSSコードを生成・コピーできます。
プレビュー
設定
CSSコード
使い方
1
形を調整する
プレビューの周囲にあるハンドルをドラッグするか、各コーナーのスライダーを動かして角丸の形を作ります。
2
プリセットを活用
円・葉形・blobなどのプリセットをワンタップで適用。そこから微調整もできます。
3
CSSをコピー
生成されたborder-radiusのCSSコードを「CSSをコピー」ボタンでコピーして、そのまま貼り付けるだけです。
border-radius生成ツールとは
CSSのborder-radiusプロパティを視覚的に作成できるジェネレーターです。4隅を個別に指定したり、横・縦で異なる楕円の角丸（8値スラッシュ記法）を作ることも可能。すべての処理はブラウザ内で完結し、入力内容がサーバーに送信されることはありません。
機能・特徴
- ライブプレビューハンドルやスライダーの操作が即座に反映。完成形を見ながら調整できます。
- 楕円(8値)対応横・縦で半径が異なる楕円の角丸も、スラッシュ記法の8値で正確に出力します。
- 形のプリセット円・葉形・blob・スクワークルなど、よくある形をワンタップで呼び出せます。
- px / % 切替相対指定の%と、プレビューサイズから算出した実寸pxの両方で出力できます。
活用シーン
- ボタン・カード・入力欄の角丸デザイン
- アバター画像を円形に切り抜くCSS作成
- 葉形・blobなど有機的な装飾シェイプ
- チケット風・ピル型UIのスタイリング
- デザインカンプからCSSへの落とし込み
よくある質問
border-radius生成ツールは無料で使えますか？
はい、完全無料です。会員登録もインストールも不要で、ブラウザを開くだけですぐにご利用いただけます。
「楕円（8値）」のスラッシュ記法とは何ですか？
border-radius: 30px 10px 30px 10px / 60px 20px 60px 20px; のように、スラッシュの前が各コーナーの横半径、後ろが縦半径を表します。横と縦で異なる楕円の角丸を作れます。
%とpxはどちらを使うべきですか？
要素のサイズに応じて丸みを変えたい場合は%、固定の丸みにしたい場合はpxが便利です。pxの値はプレビューサイズを基準に自動計算されます。
入力した内容はサーバーに送信されますか？
いいえ。すべての処理はお使いのブラウザ内で完結し、データが外部に送信されることはありません。安心してご利用いただけます。
スマートフォンでも使えますか？
はい。スマートフォン・タブレット・PCに対応しており、タッチ操作でもハンドルをドラッグして調整できます。
生成したCSSはどんなブラウザで動きますか？
border-radiusはモダンブラウザすべてで広くサポートされており、Chrome・Safari・Firefox・Edgeなどで問題なく動作します。