border-top: ★ ▲ ■;

border-right: ★ ▲ ■;

border-bottom: ★ ▲ ■;

border-left: ★ ▲ ■;

CSS 153p

上下左右の各ボーダーごとに一括して指定します。
必要な値を好きな順番で並べ、半角スペースで区切って指定します。
省略した値（書かなかった値）は初期値が指定されます。
（指定しなければ白色で表示されるので背景が白だと見えませんｗ）
できるだけ値をすべて入れましょう！
※入れれる値は各1個づつです。左右別の線、別の色を指定したい場合は、
border-widthやborder-styleやborder-colorを使わないといけません 入れれる値は下の通りです。

  • ★・・・border-width
    ボーダーの太さの指定。
  • ▲・・・border-style
    ボーダー線の種類の指定。
    ※この値を省略してしまうと線が表示されません。
  • ■・・・border-color
    ボーダーの色の指定。
 例  CSS
.sample1 {
border-top: 5px solid #ff0000;
border-right: 10px dashed #0000ff;
border-bottom: 15px double #008000;
border-left: 20px dotted #ffcc00;
width: 500px;
} 		XHTML
<div class="sample1">
<p>
上に線の太さ5px、種類solid、赤色
右に線の太さ10px、種類dashed、青色
下に線の太さ15px、種類double、緑色
左に線の太さ20px、種類dotted、黄色
に指定したものです。 <⁄p>
<⁄div>

上の表をXHTMLとCSSで書くとこうなります。
ここをクリック！

トップの戻る