ボーダーラインの線種を指定します。
値 | 説明 |
none | 線を表示せず、線幅は0になります。他のセルの線と重なる場合は、他のセル線が優先されます。 |
hidden | 線を表示せず、線幅は0になります。他のセルの線と重なる場合は、hidden が優先されます。 |
dotted | 点線で表示します。 |
dashed | 破線で表示します。 |
solid | 実線で表示します。 |
double | 二重線で表示します。 |
groove | 線が窪んで見えるような線で表示します。 |
ridge | 線が突起して見えるような線で表示します。 |
inset | 領域全体が窪んで見えるような線で表示します。 |
outset | 領域全体が突起して見えるような線で表示します。 |
値を 4つ指定した場合、それぞれは、上、右、下、左に適用されます。左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。右を省略すると上と同じ値になります。
CSS
border-style: solid; /* 上:solid、右:solid、下:solid、左:solid */
border-style: solid dotted; /* 上:solid、右:dotted、下:solid、左:dotted */
border-style: solid dotted dashed; /* 上:solid、右:dotted、下:dashed、左:dotted */
border-style: solid dotted dashed double; /* 上:solid、右:dotted、下:dashed、左:double */
none と hidden は似ていますが、border-collapse: collapse を指定したテーブルで隣のセルとの境界線が重なる場合、他セルの線が優先されるか、hidden が優先されるかが異なります。
HTML
<table style="border-collapse:collapse; background-color:#fcc">
<tr>
<td style="border-style:none">none</td>
<td style="border:1px solid black">隣のセル</td>
</tr>
<tr>
<td style="border-style:hidden">hidden</td>
<td style="border:1px solid black">隣のセル</td>
</tr>
</table>
表示
CSS
.sample-none {
border-style: none;
height: 32px;
width: 120px;
margin: 0em 0em 1em 1em;
}
.sample-hidden {
border-style: hidden;
height: 32px;
width: 120px;
margin: 0em 0em 1em 1em;
}
.sample-dotted {
border-style: dotted;
border-color: #333333;
border-width: 1px;
height: 32px;
width: 120px;
margin: 0em 0em 1em 1em;
}
.sample-dashed {
border-style: dashed;
border-color: #333333;
border-width: 1px;
height: 32px;
width: 120px;
margin: 0em 0em 1em 1em;
}
.sample-solid {
border-style: solid;
border-color: #333333;
border-width: 1px;
height: 32px;
width: 120px;
margin: 0em 0em 1em 1em;
}
.sample-double {
border-style: double;
border-color: #333333;
border-width: 4px;
height: 32px;
width: 112px;
margin: 0em 0em 1em 1em;
}
.sample-groove {
border-style: groove;
border-color: #cccccc;
border-width: 10px;
height: 32px;
width: 100px;
margin: 0em 0em 1em 1em;
}
.sample-ridge {
border-style: ridge;
border-color: #cccccc;
border-width: 10px;
height: 32px;
width: 100px;
margin: 0em 0em 1em 1em;
}
.sample-inset {
border-style: inset;
border-color: #ffffff;
border-width: 10px;
height: 32px;
width: 100px;
margin: 0em 0em 1em 1em;
}
.sample-outset {
border-style: outset;
border-color: #ffffff;
border-width: 10px;
height: 32px;
width: 100px;
margin: 0em 0em 1em 1em;
}
HTML
<div style="text-align:center; font-weight:bold;">
<div class="sample-none">none</div>
<div class="sample-hidden">hidden</div>
<div class="sample-dotted">dotted</div>
<div class="sample-dashed">dashed</div>
<div class="sample-solid">solid</div>
<div class="sample-double">double</div>
<div class="sample-groove">groove</div>
<div class="sample-ridge">ridge</div>
<div class="sample-inset">inset</div>
<div class="sample-outset">outset</div>
</div>
表示
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset