Border Radius Generator

カスタム角丸をビジュアルで設計できます。各コーナーを調整し、単位を選択してCSSをコピーします。すべてブラウザで動作します。

動作方法: スライダーを使用して各コーナーの半径を調整するか、直接値を入力します。コーナーをリンクしてすべてを一度に変更するか、リンク解除して個別に制御します。単位を選択し、図形をプレビューしてCSSをコピーします。データはサーバーに送信されません。

160px
px
px
px
px
border-radius: 12px;

border-radiusとは？

CSS border-radiusプロパティを使用すると、要素のボーダーボックスの角を丸くできます。モダンUI設計で最も広く使われているCSSプロパティの1つで、鋭い矩形要素をより柔らかく親しみやすい形状に変換します。4つのコーナーすべてに統一された半径を適用することも、各コーナーを独立して制御することもできます。border-radiusはpixel、percentage、em、その他のCSS長さ単位の値を受け入れるため、各コーナーの曲率を正確に制御できます。

Border Radius構文

border-radiusショートハンドは1〜4つの値を受け入れます。1つの値は同じ半径をすべてのコーナーに適用します。2つの値は左上/右下と右上/左下をそれぞれ設定します。3つの値は左上、右上/左下、右下を設定します。4つの値は左上から時計回りに各コーナーを設定します。楕円形のコーナーの場合はスラッシュ記法（例：border-radius: 50px / 30px）を使用します。最初のセットは水平半径を、2番目のセットは垂直半径を定義します。この8値構文により、単純な角丸をはるかに超える有機的で非対称的な形状が実現できます。

border-radiusで作成するクリエイティブな図形

border-radiusは単なる微妙な角丸処理以上の機能があります。正方形要素に50%のborder-radiusを設定すると完全な円を作成でき、矩形に適用するとピルまたはカプセル型の形状が得られます。各コーナーに異なる値を使用することで、葉型、有機的なブロブ、流動的な非対称形状を作成できます。border-radiusをbackground gradient、box-shadow、transformと組み合わせると、吹き出し、水滴、抽象的な装飾要素など、純粋なCSSのみでクリエイティブな可能性が広がります。

Border Radiusのコツ

  • %値を使用して要素サイズに応じてスケールする角丸を実現
  • 正方形要素にborder-radius: 50%を設定して完全な円を作成
  • 9999pxを使用してサイズに関係なくピル型ボタンを作成
  • コーナーごとに異なる値を組み合わせて有機的な葉型やブロブ形状を作成
  • 楕円半径（スラッシュ記法）でより自然な曲線を実現
  • border-radiusは画像、動画、任意のブロック要素で動作
  • ブラウザDevToolsで値をビジュアルに微調整できます