概要
CSSプロパティ｢border-top-style｣は、上辺の境界線（ボーダー）のスタイルを指定することができます。
<div class="border">3つの値を指定したボーダー要素</div>
<div class="border border-top-style">border-top-styleプロパティでボーダーのスタイルを調整したボーダー要素</div>
<style>
div {
margin-bottom: 10px;
}
.border {
border: 5px solid #000;
}
.border-top-style {
border-top-style: #double;
}
</style>値の指定方法
{ border-top-style: キーワード }各スタイルについて
指定できるスタイルの一覧です。 CSSプロパティ outline と同じ種類の効果を指定することができます。
| 値 | 説明 |
|---|---|
| none | ボーダーは表示されません |
| solid | 一本線のボーダーが表示されます |
| dotted | １列にならんだドット模様のボーダーが表示されます |
| dashed | 破線のボーダーが表示されます |
| double | 二本線のボーダーが表示されます |
| groove | 立体的で窪んだ線が表示されます |
| ridge | 立体的で隆起した線が表示されます |
| inset | grooveと似てますが立体的で窪んだ線が表示されます |
| outset | ridgeと似てますが、立体的で隆起した線が表示されます |
それぞれの値を指定した表示例です。
<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-top-style: solid; }
.dotted { border-top-style: dotted; }
.dashed { border-top-style: dashed; }
.double { border-top-style: double; }
.groove { border-top-style: groove; }
.ridge { border-top-style: ridge; }
.inset { border-top-style: inset; }
.outset { border-top-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-top-style-1">本日の天気は晴れです。</div>
<div class="border-style border-top-style-2">本日の天気は晴れです。</div>
<div class="border-style border-top-style-3">本日の天気は晴れです。</div>
<style>
div {
margin-bottom: 10px;
border-color: #def;
border-width: 5px;
}
.border-style {
border-style: solid;
}
.border-top-style-1 {
border-top-style: double;
}
.border-top-style-2 {
border-top-style: dotted;
}
.border-top-style-3 {
border-top-style: dashed;
}
</style>仕様書