境界線の表示の実験
それはよかったね
<head>
<style type="text/css">
<!--
.sample2 {
border-width:8px;
border-style:solid;
border-color:#99ffff #ff99cc #9900ff;
width:150px;
}
-->
</head>
<body>
<div class="sample3">
それはよかったね
</div>
</body>
border: width style color
border-top: width style color
border-right: width style color
border-bottom: width style color
border-left: width style color
例 <div style="border: 1px solid gray;">東京</div>
border-width: top right bottom left
border-top-width: width
border-right-width: width
border-bottom-width: width
border-left-width: width
例 .wakusen1 { border-width: 1px; border-style: solid; }
border-width: は上下左右すべてのボーダー(枠線)の太さを同時に設定。
border-xxx-width: は上下左右それぞれののボーダー(枠線)の太さを、
下記のいずれかのボーダー線で設定。
thin(細線)、
medium(既定値:中太線)、
thick(太線)
または 1px(幅指定) などのような単位付きの数値で指定します。
border-style: top right bottom left
border-top-style: style
border-right-style: style
border-bottom-style: style
border-left-style: style
例 .wakusen2 { border-width: 1px; border-style: solid dotted solid dotted; }
border-style: は上下左右すべてのstyleを同時に設定。
border-xxx-style: は上下左右のボーダー(枠線)のスタイルを、
下記のいずれかで設定する。
none(線無し)、
dotted(点線)、
dashed(粗い点線)、
solid(実線)、
double(二重線)、
groove(谷線)、
ridge(山線)、
inset(内線)、
outset(外線)、
inherit(継承)
border-color: color
border-top-color: color
border-right-color: color
border-bottom-color: color
border-left-color: color
例 .wakusen3 { border-color: red; border-width: 1px; border-style: solid; }