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

CSSのborder-right-colorプロパティで右ボーダーの色を設定する方法

要素の右側の境界線（ボーダー）だけに色を付けたい場合は、CSSの border-right-color プロパティを使用します。このプロパティを使うことで、上下左右すべてのボーダーではなく、右側のボーダーの色のみを個別に指定できます。

なお、border-right-color を単独で指定しても、あらかじめ border-style プロパティでボーダーのスタイル（dotted、solid など）が設定されていないと表示されない点に注意してください。以下のコードで実際の動作を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            border-style: dotted;
            border-right-color: #FFFF00;
         }
      </style>
   </head>
   <body>
      <p>これはデモ用のテキストです。</p>
   </body>
</html>

実行結果

上記のコードを実行すると、点線（dotted）スタイルのボーダーが表示され、そのうち右側のボーダーのみが黄色（#FFFF00）で描画されます。

ポイントまとめ

  • border-right-color： 右側のボーダー専用の色を指定するプロパティです。
  • border-style の設定が必須： スタイルが未指定の場合、色を設定してもボーダー自体が表示されません。
  • 色の指定方法： カラーコード（#FFFF00）、カラーネーム（yellow）、rgb() 値など、一般的な CSS の色指定形式が利用できます。
  1. CSSでリンクの色を設定する方法｜colorプロパティと疑似クラスの使い方

    CSSを使えば、リンクのテキストに自由に色を付けることができます。要素内のテキストの色を指定するには、color プロパティを使用します。さらに、リンクの状態に応じて色を変えたい場合は、疑似クラスを活用します。疑似クラスは :link → :visited → :hover → :active の順序で記述するのが基本です。これは「LVHAルール」とも呼ばれており、この順序を守ることで各スタイルが意図どおりに適用されます。構文CSSの color プロパティの基本構文は以下のとおりです。Selector {    color: /*値*/ }サンプルコード1次の例では、リン

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用