

プロパティについて
#
概要
“border-top-style”プロパティは要素の上辺の境界線の見た目を指定するプロパティです。
すべての辺の境界線の見た目をまとめて指定するには“border-style”プロパティを使用します。また、“border”プロパティや“border-top”プロパティを使用することでスタイルを含め境界線の設定をまとめて行うこともできます。
サンプルコード
div { border-top-style: dotted;}
#
値
値 | 説明 |
---|---|
“<line-style>”値 | |
none | 境界線を表示せず、境界線の太さや色の指定は無視されます (“border-collapse: collapse;”の場合に重なる境界線があればその境界線が表示されます。) |
hidden | 境界線を表示せず、境界線の太さや色の指定は無視されます (“border-collapse: collapse;”の場合に重なる境界線も表示されません。) |
dotted | 点線 |
dashed | 破線 |
solid | 実線 |
double | 二重線 |
groove | 溝のように見える線 |
ridge | 出っ張りのように見える線 |
inset | 境界線の中身が沈み込んでいるように見える線 (“border-collapse: collapse;”の場合は“ridge”とみなされます。) |
outset | 境界線の中身が出っ張っているように見える線 (“border-collapse: collapse;”の場合は“groove”とみなされます。) |
他の値 | |
共通キーワード |
#
仕様書
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Border properties|Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'
CSS Backgrounds and Borders Module Level 3
Borders|Line Patterns: the border-top-style properties
定義されている仕様書
![]() |
![]() |
![]() |
|
---|---|---|---|
![]() | ![]() | ![]() | |
border-top-style | ![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|
![]() | ![]() | ![]() | |
none | ![]() ![]() |
![]() ![]() |
![]() ![]() |
hidden | ![]() ![]() |
![]() ![]() |
![]() ![]() |
dotted | ![]() ![]() |
![]() ![]() |
![]() ![]() |
dashed | ![]() ![]() |
![]() ![]() |
![]() ![]() |
solid | ![]() ![]() |
![]() ![]() |
![]() ![]() |
double | ![]() ![]() |
![]() ![]() |
![]() ![]() |
groove | ![]() ![]() |
![]() ![]() |
![]() ![]() |
ridge | ![]() ![]() |
![]() ![]() |
![]() ![]() |
inset | ![]() ![]() |
![]() ![]() |
![]() ![]() |
outset | ![]() ![]() |
![]() ![]() |
![]() ![]() |
使用例
#
上辺の境界線の見た目を指定する
div { border-top-style: none;}
border-top-style: none;
div { border-top-style: hidden;}
div {
border-width: 5px;
border-top-style: dotted;
}
border-top-style: dotted;
div {
border-width: 5px;
border-top-style: dashed;
}
border-top-style: dashed;
div {
border-width: 5px;
border-top-style: solid;
}
border-top-style: solid;
div {
border-width: 5px;
border-top-style: double;
}
border-top-style: double;
div {
border-width: 5px;
border-top-style: groove;
}
border-top-style: groove;
div {
border-width: 5px;
border-top-style: ridge;
}
border-top-style: ridge;
div {
border-width: 5px;
border-top-style: inset;
}
border-top-style: inset;
div {
border-width: 5px;
border-top-style: outset;
}
border-top-style: outset;