CSS-ボーダー

_border_プロパティを使用すると、要素を表すボックスの境界線の外観を指定できます。あなたが変更できる境界線の3つのプロパティがあります-

border-color は境界線の色を指定します。
border-style は、境界線を実線、破線、二重線、または他の可能な値のいずれにするかを指定します。
border-width は、境界線の幅を指定します。

次に、これらのプロパティの使用方法を例とともに示します。

border-colorプロパティ

border-colorプロパティを使用すると、要素を囲む境界線の色を変更できます。プロパティを使用して、要素の境界線の下、左、上、および右の色を個別に変更できます-

border-bottom-color は、下の境界線の色を変更します。
border-top-color は、上部の境界線の色を変更します。
border-left-color は、左境界線の色を変更します。
border-right-color は、右境界線の色を変更します。

次の例は、これらすべてのプロパティの効果を示しています-

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900;/*Green*/
            border-top-color:#FF0000;   /*Red*/
            border-left-color:#330000;  /*Black*/
            border-right-color:#0000CC; /*Blue*/
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;       /*Green*/
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>

      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

それは次の結果を生成します-

ボーダースタイルのプロパティ

境界線スタイルのプロパティを使用すると、境界線の次のスタイルのいずれかを選択することができます-

none -ボーダーなし。（border-width：0に相当;）
solid -境界線は単一の実線です。
dotted -ボーダーは一連のドットです。
破線-境界線は一連の短い線です。
double -境界線は2本の実線です。
groove -ボーダーはページに刻まれているように見えます。
ridge -境界線は溝の反対に見えます。
インセット-枠線は、ボックスがページに埋め込まれているように見えます。
outset -Borderは、キャンバスから出てきたようにボックスを表示します。
hidden -表要素の境界線競合解決の点を除いて、noneと同じです。

次のプロパティを使用して、要素の下、左、上、および右の境界線のスタイルを個別に変更できます-

border-bottom-style は、下の境界線のスタイルを変更します。
border-top-style は、上部の境界線のスタイルを変更します。
border-left-style は、左ボーダーのスタイルを変更します。
border-right-style は、右境界線のスタイルを変更します。

次の例は、これらすべての境界線スタイルを示しています-

<html>
   <head>
   </head>

   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>

      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>

      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>

      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>

      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>

      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>

      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>

      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>

      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>

      <p style = "border-width:4px;
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

それは次の結果を生成します-

border-widthプロパティ

border-widthプロパティを使用すると、要素の境界線の幅を設定できます。このプロパティの値は、px、pt、またはcmの長さのいずれか、または_thin、medium、thickに設定する必要があります。

次のプロパティを使用して、要素の下、上、左、および右の境界線の幅を個別に変更できます-

border-bottom-width は、下の境界線の幅を変更します。
border-top-width は、上部の境界線の幅を変更します。
border-left-width は左ボーダーの幅を変更します。
border-right-width は、右境界線の幅を変更します。

次の例は、これらすべての境界線の幅を示しています-

<html>
   <head>
   </head>

   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>

      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>

      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>

      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>

      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>

      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

それは次の結果を生成します-

ショートハンドを使用した境界線プロパティ

borderプロパティを使用すると、1つのプロパティで線の色、スタイル、および幅を指定できます-

次の例は、3つのプロパティすべてを使用して1つのプロパティにする方法を示しています。これは、要素の周囲に境界線を設定するために最も頻繁に使用されるプロパティです。

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

それは次の結果を生成します-

Css-borders

CSS-ボーダー

border-colorプロパティ

ボーダースタイルのプロパティ

border-widthプロパティ

ショートハンドを使用した境界線プロパティ

目次