CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-radiusプロパティとは？角丸ボーダーの実装方法を解説

CSSのborder-radiusプロパティを使うと、要素の四隅に丸み（角丸）を付けることができます。このプロパティは、4つの角それぞれに対する半径を一度に指定できる便利なプロパティです。

値を1つだけ指定した場合は、すべての角に同じ丸みが適用されます。また、値をカンマ区切りで複数指定することで、各角ごとに異なる丸みを設定することも可能です。

border-radiusの基本的な使い方

以下のコードは、border-radiusプロパティを使用して角丸のボーダーを持つ要素を作成する例です。

サンプルコード

<html>
   <head>
      <style>
         #rcorner {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
      </style>
   </head>
   <body>
      <p id="rcorner">Rounded corners!</p>
   </body>
</html>

コードの解説

  • border-radius: 25px; — 要素の四隅すべてに25pxの丸みを適用します。
  • background: #8AC007; — 背景色を黄緑色に設定し、角丸がわかりやすくなるようにしています。
  • padding / width / height — 要素の内側の余白とサイズを指定しています。

応用：各角に異なる値を指定する

border-radiusプロパティでは、値をスペース区切りで最大4つまで指定できます。指定順序は左上・右上・右下・左下の順です。

#rcorner {
  border-radius: 10px 30px 50px 70px;
}

このように記述すると、左上は10px、右上は30px、右下は50px、左下は70pxの丸みがそれぞれ適用されます。さらに、border-radius: 50%; のようにパーセンテージを指定すれば、正方形の要素を完全な円形にすることもできます。

角丸デザインは、ボタンやカード、画像などさまざまなUI要素で活用されているため、ぜひマスターしておきましょう。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります