Documentation CSS

この記事で学べること

  • border-radiusプロパティの基本構文
  • 各角を個別に設定する方法
  • 楕円形の角丸の作り方
  • 円形デザインの実装テクニック
  • ボタンやカードへの実践的な適用例

概要

CSSのborder-radiusプロパティは、要素の角を丸めるためのプロパティです。これを使うことで、ボタンやカードのデザインに柔らかい印象を与えることができ、現代的で親しみやすいウェブデザインを作るのに役立ちます。border-radiusは、シンプルな角丸から楕円形の形状まで柔軟に設定でき、デザインの幅を広げる重要なツールです。本記事では、border-radiusの基本的な使い方や、さまざまな指定方法、実践的なデザイン例について詳しく解説します。

border-radiusの基本構文

border-radiusプロパティの基本的な構文は以下の通りです。

border-radius: 値;
  • 値には、ピクセル（px）、パーセント（%）、emなどの単位を指定します。パーセントを使用することで、要素のサイズに応じた角丸が設定されます。

基本的な例

.box {
    border: 1px solid #ccc;
    border-radius: 10px; /* すべての角を10px丸める */
}

この例では、要素のすべての角が10px丸められ、柔らかい見た目のボックスになります。

border-radiusの指定方法

単一の値で一括指定

border-radiusを1つの値で指定すると、4つの角がすべて同じ半径で丸められます。

.button {
    border-radius: 15px; /* すべての角が15pxの丸み */
}

各角ごとに個別指定

border-radiusは、4つの値を指定することで各角を個別に設定できます。順番は左上、右上、右下、左下の順です。

.box {
    border-radius: 10px 20px 30px 40px; /* 左上, 右上, 右下, 左下 */
}

この例では、各角に異なる丸みが適用されます。

楕円形の角丸の指定

border-radiusはスラッシュ（/）を使って、横と縦の半径を別々に指定することで、楕円形の角丸を作ることができます。

.box {
    border-radius: 50px / 20px; /* 横50px、縦20pxの楕円形の角丸 */
}

この設定により、要素の角が横長の楕円形に丸められます。

個別プロパティでの指定

また、border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radiusを使って、各角の丸みを個別に指定することもできます。

.box {
    border-top-left-radius: 30px; /* 左上の角だけ丸める */
    border-bottom-right-radius: 15px; /* 右下の角だけ丸める */
}

border-radiusを使った実践的なデザイン例

ボタンの角を丸めて柔らかい印象にする

border-radiusを使用して、ボタンに角丸を設定することで、より親しみやすいデザインにできます。

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px; /* 角を5px丸める */
    cursor: pointer;
}

この設定により、ボタンが少し丸みを帯びた形状となり、視覚的に柔らかい印象を与えます。

完全な円形を作成する

幅と高さが同じ要素に対して、border-radiusを50%に設定すると、完全な円形を作成できます。プロフィール画像や装飾的なアイコンなどに使われます。

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 完全な円形に */
    overflow: hidden; /* 画像をボックスの形に切り抜く */
}

カードのデザインに角丸を取り入れる

カードのデザインに角丸を加えることで、より魅力的でモダンな見た目になります。

.card {
    border: 1px solid #ddd;
    border-radius: 15px; /* 角を15px丸める */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 影をつけて浮き上がるように */
    padding: 20px;
    background-color: white;
}

この設定で、カードがフラットな印象から立体的で高級感のあるデザインに変わります。

border-radiusの注意点

  1. 適切な値を設定する
    値が大きすぎると、ボックスの形状が不自然に見えることがあります。特に、片方だけが大きく丸まっている場合は、デザイン全体のバランスを確認しましょう。
  2. 画像の角丸
    border-radiusを適用すると、画像の角も丸めることができますが、画像のサイズや配置により不自然になることがあります。必要に応じてoverflow: hidden;を追加して、画像がボックスの形に収まるようにします。
  3. ブラウザ対応を考慮する
    border-radiusはほとんどの現代ブラウザでサポートされていますが、古いブラウザや特定のバージョンではうまく表示されない場合があります。必要に応じて、ベンダープレフィックス（-webkit-, -moz-）を使用することも検討してください。

まとめ

border-radiusプロパティは、要素の角を丸めることで、デザインに柔らかさや親しみやすさを加える重要なCSSプロパティです。シンプルな角丸設定から楕円形の角丸、円形デザインまで、border-radiusの使い方をマスターすることで、ウェブデザインの幅が広がります。適切な値を選び、デザイン全体との調和を意識しながら、視覚的に美しいサイトを作りましょう。

ポイントの振り返り

指定方法構文例説明
1値border-radius: 10px全角同じ
2値border-radius: 10px 20px左上右下/右上左下
4値border-radius: 10px 20px 30px 40px左上/右上/右下/左下
楕円border-radius: 50px / 20px横/縦の半径
円形border-radius: 50%完全な円

個別プロパティ

プロパティ対象
border-top-left-radius左上角
border-top-right-radius右上角
border-bottom-right-radius右下角
border-bottom-left-radius左下角

参考文献

円