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

CSSのborder-colorプロパティで4つの境界線の色を個別に設定する方法

CSSで4つの境界線の色を設定するには

要素の4つの境界線（上・右・下・左）それぞれに異なる色を指定したい場合は、border-colorプロパティを使用します。このプロパティには最大4つの値を半角スペースで区切って指定でき、色は上 → 右 → 下 → 左の順番（時計回り）で適用されます。

なお、border-colorを機能させるには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashed、dottedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」となり、境界線自体が表示されない点に注意しましょう。

コード例

以下のコードでは、破線（dashed）の境界線に対して、オリーブ、マルーン、赤、黄色の4色を順に適用しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            border-style: dashed;
            border-color: #808000 #800000 #FF0000 #FFFF00;
         }
      </style>
   </head>
   <body>
      <p>This is demo text with four colored border.</p>
   </body>
</html>

出力結果

CSSのborder-colorプロパティで4つの境界線の色を個別に設定する方法

各辺に対応する色の指定

  • 1つ目の値（#808000：オリーブ） … 上の境界線
  • 2つ目の値（#800000：マルーン） … 右の境界線
  • 3つ目の値（#FF0000：赤） … 下の境界線
  • 4つ目の値（#FFFF00：黄色） … 左の境界線

このようにborder-colorプロパティを使えば、1行の記述で4辺すべてに個別の色を簡単に割り当てることができます。カラーコードのほか、redやgoldなどのキーワード、rgb()やrgba()関数なども利用可能です。

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

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

  2. CSSでグラデーションのカラーストップ位置を設定する方法

    CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に