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

CSSのborder-bottom-left-radiusプロパティの使い方を解説

CSSのborder-bottom-left-radiusプロパティは、要素の左下隅の角丸（境界線の丸み）を設定するために使用します。このプロパティを使うことで、ボックスの左下だけに個別の角丸を適用でき、デザインの自由度が高まります。

border-bottom-left-radiusの基本構文

border-bottom-left-radius: 値;

値にはpxや%などの長さの単位を指定できます。数値が大きいほど、角の丸みが大きくなります。

実装例

以下のコードは、border-bottom-left-radiusプロパティを使って左下隅のみを大きく丸めたボックスを作成する例です。

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

コードの解説

  • border-radius: 25px; — すべての四隅に25pxの角丸を設定します。
  • border-bottom-left-radius: 45px; — 左下隅のみ45pxとし、他の角より大きな丸みを適用します。
  • background: blue; — 背景色を青にして、角丸がわかりやすくなるようにしています。

このコードを実行すると、全体的に角丸が適用された青いボックスの中で、左下の角だけが特になだらかに丸まった要素が表示されます。個別の角の形状を調整したい場合に、border-bottom-left-radiusのような各コーナー専用プロパティは非常に便利です。

  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：要素がポインターイベントに反応しなくなります