border-top-style: ★;

border-right-style: ★;

border-bottom-style: ★;

border-left-style: ★;

CSS 146p

ボーダーの種類を個別に設定します。
ボーダーの種類は初期値が「none」に設定しているため、ボーダーを表示するには
「none」か「hidden」以外の値を指定する必要があります。
値は次の10個の中から選びます。

  • none
    ボーダーを表示しない。border-widthプロパティの値（ボックス、画像の幅）も
    「0」に設定されている。tableのセルなどの枠線として重なりがあった場合には
    ほかの値が優先されます。
  • hidden
    効果は「none」と同じです。あまり使われません。
  • dotted
    点線で表示されます。
  • dashed
    破線で表示されます。
  • solid
    実践で表示されます。一番多く使われます！
  • double
    2重線で表示されます。
  • groove
    へこんだように見える線で表示されます。
  • ridge
    浮き上がったように見える線で表示されます。
  • inset
    内側がへこんだように見える線で表示されます。
  • outset
    内側が浮き上がったように見える枠線で表示されます。

※ブラウザによって表示のしかたが変わります。

 例  CSS
.sample {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
width: 300px;（ボックスの幅）
border-color: #000000;（枠線の色）
} 		XHTML
<div class="sample">
<p>
よく使われる線4種類を指定しました。
<⁄p>
<⁄div>

文章ではわかりにくいと思いますので、よく使われる線4種類を表示させて見ました！
ここをクリック！

トップに戻る