border-style: ★;

CSS 150p

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

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

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

次に入れる値は下の10個の中から選びます。

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

.sample2 {
border-style: double;
width: 300px;
border-color:#0000ff;
}

.sample3 {
border-style: dashed;
width: 300px;
border-color:#008000;
}

.sample4 {
border-style: dotted;
width: 300px;
border-color:#ffcc00;
}

 XHTML
<div class="sample1">
<p>
solidを指定しました。
<⁄p>
<⁄div>

<div class="sample2">
<p>
doubleを指定しました。
<⁄p>
<⁄div>

<div class="sample3">
<p>
dashedを指定しました。
<⁄p>
<⁄div>

<div class="sample4">
<p>
dottedを指定しました。
<⁄p>
<⁄div>

これをXHTMLとCSSで書いた場合はこうなります。
ここをクリック！

トップに戻る