border-width: ★;

CSS 138p

ボーダーの幅を一括指定します。値が一つだけの場合は上下左右に設定した値が
適応されます。2〜4個設定したい場合は半角スペースで区切って並べます。
並べる個数によって適応される位置が違いますので
その違いを示したものが下の表となります。
※個数が増えると値が適応される箇所が変わりますので注意してください。

★ 上下左右同じ値が設定されます。
★ ★ 上下、左右に分けて値がそれぞれに設定されます。
★ ★ ★ 上、左右、下の順番で値がそれぞれに設定されます。
★ ★ ★ ★ 上、右、下、左の順番で値がそれぞれに設定されます。

上の表の違いを実際に表したのがこちらになります。
ここをクリック！

次に値の指定方法を説明します。
ボーダーは種類の初期値が「none（非表示）」のため、幅を指定しただけでは
ボーダーは表示されません。（種類についてはこちらを見てください。）
値は次の4つから選びます。

  • thin
    細い線で表示されます。
  • medium
    中くらいの線で表示されます。
  • thick
    太い線で表示されます。
  • 実数値＋単位
    数値に値をつけてボーダーの指定をします。
    ※マイナス値は指定できません。単位についてはこちらを見てください。
 例  CSS
.sample1 {
border-style: solid;
border-width: thin:
border-color: #000000:
width:200px;（ボックスの幅の指定です）
}

sample2 {
border-style: solid;
border-width: thin medium:
border-color: #000000:
width:200px;（ボックスの幅の指定です）
}

sample3 {
border-style: solid;
border-width: thin medium thick:
border-color: #000000:
width:200px;（ボックスの幅の指定です）
}

sample4 {
border-style: solid;
border-width: thin medium thick 15px:
border-color: #000000:
width:200px;（ボックスの幅の指定です）
}

 XHTML
<div class="sample1">
<p>
上下左右に設定したものです。
<⁄p>
<⁄div>


<div class="sample2">
<p>
上下、左右に分けて設定したものです。
<⁄p>
<⁄div>


<div class="sample3">
<p>
上、左右、下に分けて設定したものです。
<⁄p>
<⁄div>


<div class="sample4">
<p>
上、右、下、左に分けて設定したものです。
<⁄p>
<⁄div>

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

トップに戻る