Border Radiusジェネレータ

ライブビジュアルエディターで完璧なCSS角丸を作成。各コーナーを独立に調整、単位選択（px、%、em、rem）、即座に使用できるCSSをコピー。100%無料・クライアントサイド。

プリセット
プレビュー
Preview
CSSコード
border-radius: 8px;

Border Radiusジェネレータについて

CSS Border Radiusジェネレータは、HTML要素にカスタム角丸を作成するビジュアルツールです。各コーナーを独立に微調整 — 左上、右上、右下、左下 — 単位も選択可能（px、%、em、rem）。自動的に最もコンパクトなCSSショートハンド構文を生成します。

機能

よくある質問

CSS border-radiusとは何ですか？

CSS border-radiusプロパティは、要素の外側の境界線の角を丸めます。単一の半径を設定してすべての角を同じにするか、最大4つの値を設定して各コーナーを個別に制御できます。

どの単位を使用すべきですか？

固定ピクセル完璧な角にはpxを（カードの8pxなど）、要素に対する相対サイズには%を（円の50%など）、フォントサイズに応じてスケールするにはem/remを使用します。

ショートハンド構文はどのように機能しますか？

CSS border-radiusは1〜4つの値をサポート：1つの値 = すべてのコーナー、2つの値 = 左上＋右下と右上＋左下、3つの値 = 左上、右上＋左下、右下、4つの値 = 左上、右上、右下、左下。

生成されたCSSはすべてのブラウザで動作しますか？

はい。生成されたborder-radius構文はCSS3標準に準拠しており、Chrome、Firefox、Safari、Edge、モバイルブラウザを含むすべてのモダンブラウザで動作します。