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

CSSで境界線（ボーダー）のスタイルを設定する方法

CSSで要素の境界線（ボーダー）のスタイルを設定するには、border-style プロパティを使用します。このプロパティにより、以下のようなさまざまなスタイルから好みのボーダーを選択できます。

border-styleで指定できる主な値

  • none： 境界線を表示しません。
  • solid： 1本の実線で表示されます。
  • dotted： 点線（ドットの連続）で表示されます。
  • dashed： 破線（短い線分の連続）で表示されます。
  • double： 2本の実線で表示されます。
  • groove： ページに刻み込まれたような凹凸のある立体的な線で表示されます。
  • ridge： grooveの逆で、盛り上がって見える立体的な線で表示されます。
  • inset： 要素がページに埋め込まれているように見えます。
  • outset： 要素がページから浮き上がって出ているように見えます。
  • hidden： noneと同じく非表示ですが、table要素におけるボーダーの衝突解決（border-conflict resolution）の扱いのみ異なります。

サンプルコード

以下のコードを実行して、実際に各ボーダースタイルの違いを確認してみましょう。

<html>
   <head>
   </head>
   <body>.
      <p style = "border-width:4px; border-style:none;">
         none（境界線なし）のサンプルです。
      </p>
      <p style = "border-width:4px; border-style:solid;">
         solid（実線）のボーダーサンプルです。
      </p>
      <p style = "border-width:4px; border-style:dashed;">
         dashed（破線）のボーダーサンプルです。
      </p>
      <p style = "border-width:4px; border-style:double;">
         double（二重線）のボーダーサンプルです。
      </p>
      <p style = "border-width:4px; border-style:groove;">
         groove（溝付き）のボーダーサンプルです。
      </p>
   </body>
</html>

なお、border-style プロパティは border-width や border-color と組み合わせて使うことで、より細かいデザイン調整が可能です。また、これらをまとめて1行で指定できる shorthand プロパティ「border」も活用すると便利です。

  1. CSSのborder-image-widthプロパティで境界線画像の幅を設定する方法

    CSSのborder-image-widthプロパティを使用すると、要素の境界線に適用した画像（ボーダーイメージ）の幅を指定できます。このプロパティを使いこなすことで、境界線画像の表示サイズを細かくコントロールでき、デザインの自由度が大きく向上します。border-image-widthプロパティの基本border-image-widthプロパティは、border-image-sourceで指定した画像を境界線として描画する際の幅を決定します。値にはpx、emなどの長さの単位、数値（境界線幅に対する倍率）、またはパーセンテージを指定できます。autoを指定した場合は、border-image-

  2. CSSで下境界線（border-bottom）のスタイルを設定する方法

    要素の下側に表示される境界線（ボーダー）のデザインを変更したい場合は、CSSの border-bottom-style プロパティを使用します。このプロパティでは、点線や二重線、破線、実線など、さまざまなスタイルの下境界線を簡単に設定できます。 指定できる主な値 border-bottom-style プロパティに指定できる代表的な値は以下のとおりです。 dotted … 点線 dashed … 破線 solid … 実線 double … 二重線 inset … 凹んで見える立体風の線 outset … 浮き上がって見える立体風の線 サンプルコード 次のコードを実行すると、各クラスごとに