４辺の境界線（ボーダー）まとめて設定するショートハンド

CSS - border-style

概要

CSSプロパティ｢border-style｣は、境界線（ボーダー）のスタイルを4辺まとめて指定することができるショートハンドプロパティです。

<div class="border">3つの値を指定したボーダー要素</div>
<div class="border border-style">border-styleプロパティでボーダーのスタイルを変更したボーダー要素</div>
<style>
div {
  margin-bottom: 10px;
}
.border {
  border: 1px solid #000;
}
.border-style {
   border-style: dotted;
}
</style>

値の指定方法

値は１つから４つまでいれることができ、それぞれ｢上下左右｣の4辺に対応しています。

{ border-style: キーワード(1~4つ) }

4辺のキーワードについて

４辺というのは「上」、「下」、「左」、「右」を指し、まとめて記述することも、一つづつ指定することも可能です。キーワードが１つの場合はそのキーワードが４辺全てに反映され、２つのキーワードをいれると「上下」、「左右」に反映されます。更には、４つのキーワードを入れた場合は「上」「右」「下」「左」と、時計回りの順序で指定が反映されます。

こちらは4つキーワードを入れた例です。

<div class="border">基準となるボーダー要素</div>
<div class="border border-style">border-styleプロパティのキーワードを4つ指定</div>
<style>
div {
  margin-bottom: 10px;
}
.border {
  border: 10px solid;
}
.border-style {
  border-style: dotted solid double groove;
}
</style>
値 説明
プロパティ名: 5px 「上下左右」に5pxの値を指定します。
プロパティ名: 5px 10px 「上下」に5px、
「左右」に10pxの値を指定します。
プロパティ名: 5px 10px 15px「上」に5px、
「左右」に10px、
「下」に15pxの値を指定します。
プロパティ名: 5px 10px 15px 20px 「上」に5px、
「右」に10px、
「下」に15px、
「左」に20pxの値を指定します。

各スタイルについて

指定できるスタイルの一覧です。 CSSプロパティ outline と同じ種類の効果を指定することができます。

値説明
noneボーダーは表示されません
solid一本線のボーダーが表示されます
dotted１列にならんだドット模様のボーダーが表示されます
dashed破線のボーダーが表示されます
double二本線のボーダーが表示されます
groove立体的で窪んだ線が表示されます
ridge 立体的で隆起した線が表示されます
insetgrooveと似てますが立体的で窪んだ線が表示されます
outsetridgeと似てますが、立体的で隆起した線が表示されます

それぞれの値を指定した表示例です。

<p class="solid">solidを指定します</p>
<p class="dotted">dottedを指定します</p>
<p class="dashed">dashedを指定します</p>
<p class="double">doubleを指定します</p>
<p class="groove">grooveを指定します</p>
<p class="ridge">ridgeを指定します</p>
<p class="inset">insetを指定します</p>
<p class="outset">outsetを指定します</p>
<style>
p {
  border-color: #def;
  border-width: 10px;
}
.solid { border-style: solid; }
.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge { border-style: ridge; }
.inset { border-style: inset; }
.outset { border-style: outset; }
</style>

プロパティの種類について

｢border｣ プロパティは、4辺それぞれに異なった値をいれることができませんが、細分化したプロパティを使用することによって、値を変更することができます（指定可のみ）。それぞれのプロパティをまとめた一覧になりますので確認してみてください。

プロパティ名４辺一括で指定される内容細分化プロパティ名
borderボーダーの太さ、スタイル、色を指定できる4辺指定可。border-top、border-bottom、border-left、border-right
border-width太さを指定できる4辺指定可。border-top-width、border-bottom-width、border-left-width、border-right-width
border-styleスタイルを指定できる4辺指定可。border-top-style、border-bottom-style、border-left-style、border-right-style
border-color色を指定できる4辺指定可。border-top-color、border-bottom-color、border-left-color、border-right-color
border-image背景を指定できる4辺指定不可。border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat

使用例

要素によって、ボーダーのスタイルのみを変更したい場合などに使用するとよいでしょう。

<div class="border-style">本日の天気は晴れです。</div>
<div class="border-style border-style-1">本日の天気は晴れです。</div>
<div class="border-style border-style-2">本日の天気は雨です。</div>
<style>
div {
  margin-bottom: 10px;
}
.border-style {
  border-style: solid;
}
.border-style-1 {
  border-style: dotted;
}
.border-style-2 {
 border-style: double;
}
</style>

仕様書

CSS Backgrounds and Borders Module Level 3

CSS Level 2 (Revision 1)

CSS Level 1

関連CSSプロパティ