CSS-ボーダースタイル

説明

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

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要素。

DOM構文

object.style.borderStyle = "Any of the values defined above";

例

以下は、これらすべての境界線スタイルを表示する例です-

<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>

これにより、次の結果が生成されます–

Css-border-style

目次

CSS-ボーダースタイル

説明

可能な値

に適用されます

DOM構文

例