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

CSSのborder-radiusプロパティで4つの角丸をまとめて設定する方法

CSSの border-radius プロパティを使用すると、要素の4つの角(左上・右上・右下・左下)の丸みを、たった1行のコードでまとめて設定できます。個別に指定する手間が省け、角丸デザインを効率的に実装できる便利なショートハンドプロパティです。

border-radiusの基本的な使い方

以下のサンプルコードでは、border-radius: 25px; を指定することで、青い背景のボックスの四隅すべてに25pxの丸みを付けています。

サンプルコード

<html>
   <head>
      <style>
         #rcorner {
            border-radius: 25px;
            background: #85C1E9;
            color: white;
            padding: 20px;
            width: 200px;
            height: 250px;
         }
      </style>
   </head>
   <body>
      <p id = "rcorner">Rounded corners!</p>
   </body>
</html>

値を変えて角丸を調整する

border-radius の値を大きくするほど、角の丸みは強くなります。例えば 50% を指定すると、正方形の要素は円形に、長方形の要素は楕円形になります。

  • 25px … 控えめな角丸
  • 50px … より大きな丸み
  • 50% … 円形・楕円形を作成

各コーナーを個別に指定したい場合

4つの角それぞれに異なる丸みを設定したい場合は、以下の個別プロパティを使用します。

  • border-top-left-radius(左上)
  • border-top-right-radius(右上)
  • border-bottom-right-radius(右下)
  • border-bottom-left-radius(左下)

また、border-radius: 10px 20px 30px 40px; のようにスペース区切りで4つの値を並べると、左上から時計回りに順番に適用されます。モダンブラウザではベンダープレフィックスなしで広くサポートされているため、安心して使用できます。

  1. CSSのallプロパティですべてのスタイルをリセットする方法

    CSSには、要素に適用されたすべてのプロパティを一括でリセットできる便利なallプロパティが用意されています。個別のプロパティをひとつずつ上書きする必要がなく、スタイルの一括初期化や継承制御を簡単に行えます。 allプロパティに指定できる値 allプロパティには、主に以下の3つの値を設定できます。 initial: すべてのプロパティをCSS仕様で定められた初期値に戻します。 inherit: すべてのプロパティを親要素から継承します。 unset: 継承可能なプロパティは親から継承し、継承できないプロパティは初期値にリセットします。 実装例 以下のコードでは、#demo要素に対してall

  2. CSSフォントプロパティ徹底解説！font-familyやfont-sizeの使い方と実例

    CSSのフォントプロパティを使うことで、Webページ上のテキストの見た目を自由にカスタマイズできます。本記事では、テキストのスタイリングに役立つ主要なフォント関連プロパティを、実際のコード例とともにわかりやすく解説します。 CSSの主要なフォントプロパティ一覧 font-family 要素に適用するフォント（書体）を指定するためのプロパティです。複数のフォント名をカンマ区切りで列挙でき、先頭から順に利用可能なものが適用されます。 font-kerning 文字間隔を均一に整え、可読性を高めるために使用するプロパティです。ただし、この機能はフォント側がカーニング情報を持っている場合にのみ有効とな