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

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

```html

CSSのborder-bottom-right-radiusプロパティとは

border-bottom-right-radiusプロパティは、要素の右下隅の角丸を設定するために使用します。このプロパティを活用することで、ボックスの他の角はそのままに、右下の角だけを個別に丸くすることができます。

基本的な構文

値にはpx、em、remなどの長さの単位や、パーセンテージ（%）を指定できます。また、「水平方向 垂直方向」のように2つの値をスペースで区切って指定すると、楕円形の角丸を作成することも可能です。

実装例

以下のコードは、border-bottom-right-radiusプロパティを使用して、右下の角だけを丸くする実装例です。

<html>
   <head>
      <style>
         #rcorner {
            border-radius: 25px;
            border-bottom-right-radius: 45px;
            background: orange;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
      </style>
   </head>
   <body>
      <p id="rcorner">角丸のサンプル！</p>
   </body>
</html>

コードの解説

この例では、まずborder-radius: 25px;ですべての角に25pxの丸みを設定し、その後border-bottom-right-radius: 45px;で右下の角のみを45pxに上書きしています。背景色はオレンジ色（orange）とし、paddingやwidth、heightによってボックスの大きさを定義しています。

主な指定値

  • 長さ（px、em、remなど）：角丸の半径を絶対値で指定します。
  • パーセンテージ（%）：ボックスのサイズに対する割合で指定します。
  • 初期値は0：何も指定しない場合、角は丸くなりません。

まとめ

border-bottom-right-radiusプロパティを活用すれば、デザインのアクセントとして特定の角だけを丸くすることができます。すべての主要ブラウザでサポートされているため、安心して使用できる便利なCSSプロパティです。

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