CSSツール/ボーダー半径ジェネレーター
ボーダー半径ジェネレーター
ビジュアルコントロールとプリセットでCSS border-radius値を生成
コントロール
ビジュアルエディター
8px
8px
8px
8px
コーナーハンドルをドラッグして半径を調整
ボーダー半径
8px
プリセット
プレビュー
200px
現在の設定でプレビュー
CSSコード
border-radius: 8px;ボーダー半径ガイド
CSSで丸みを帯びた角を作成する方法を学ぶ
Border Radiusとは？
CSS border-radiusプロパティは、要素の外側の境界線の角を丸くします。単一の半径を設定して円形の角を作成したり、各角に異なる半径を指定してより複雑な形状を作成できます。現代のウェブデザインで最もよく使用されるCSSプロパティの1つです。
使用方法
- コーナーハンドルをドラッグして視覚的に半径値を調整
- 「コーナーをリンク」を切り替えて全体または個別に編集
- 必要に応じて単位タイプ（px、%、rem）を選択
- 一般的なパターンはプリセットを使用してからCSSをコピー
プロのヒント
ブラウザサポート
border-radiusはChrome、Firefox、Safari、Edgeを含むすべての最新ブラウザでサポートされています。優れた互換性で本番環境での使用に安全です。
よくある質問
border-radiusで完璧な円を作るには？
正方形の要素（幅と高さが同じ）にborder-radiusを50%に設定します。サイズに関係なく完璧な円が作成されます。長方形の場合、50%は楕円になります。
pxと%単位の違いは？
ピクセル値（px）は要素サイズに関係なく固定サイズの丸い角を作成します。パーセント値（%）は要素の寸法に相対的です - 50%は常に最大の丸みを作成します。一貫した角にはpx、レスポンシブデザインには%を使用してください。
各角に異なる半径を使用できますか？
はい、border-radiusは1〜4つの値を受け入れます：1つの値はすべての角に適用、2つの値は左上/右下と右上/左下を設定、4つの値は各角を個別に設定（左上、右上、右下、左下）します。
非対称のブロブ形状はどう作りますか？
8つの値を使用して完全な制御：border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px。「/」の前の値は水平半径、「/」の後の値は各角の垂直半径を制御します。
border-radiusは要素のコンテンツに影響しますか？
border-radiusは視覚的な境界線のみを丸くします。コンテンツは「overflow: hidden」を設定しない限り、角にはみ出すことがあります。これによりコンテンツが丸い形状に合わせて切り取られ、丸いコンテナ内の画像に便利です。