CSS - border-style

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

概要

属性名 border-style
<style>{1,4}
値の詳細 <style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
初期値none
適用可能要素すべて
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS15.5113.51

説明

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

説明
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 */

nonehidden は似ていますが、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>
表示
none 隣のセル
hidden 隣のセル

使用例

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

関連項目

border, border-width, border-style, border-color

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/border-style.htm