CSS - border-style

• トップ
• CSSリファレンス
• border-style

概要

サポート (説明)

説明

ボーダーラインの線種を指定します。

値を 4つ指定した場合、それぞれは、上、右、下、左に適用されます。左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。右を省略すると上と同じ値になります。

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 が優先されるかが異なります。

<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>

使用例

.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;
}

<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>

関連項目

リンク

• http://www.w3.org/TR/CSS1/#border-style
• http://www.w3.org/TR/CSS2/box.html#propdef-border-style
• http://www.w3.org/TR/css3-background/#the-border-style
• https://developer.mozilla.org/ja/docs/Web/CSS/border-style
• http://caniuse.com/#search=css%202.1%20properties