border-style
border-styleはボーダーのスタイルを指定するためのプロパティです。
border-styleには以下の値が指定できます。
none | |
---|---|
hidden | |
dotted | |
dashed | |
solid | |
double | |
groove | |
ridge | |
inset | |
outset |
.target{
border-style:soid;
}
値がひとつの場合は上下左右に対して、値が2つの場合は上下、左右に対して、値が3つの場合は値が上、左右、下に対して、値が4つの場合は上、右、下、左に対して指定がされます。
下記のように指定した場合は、上辺が「solid」、左右辺が「double」、下辺が「dotted」になります。
.target{
border-style:soid double dotted;
}
個別に指定する場合、上辺のスタイルを指定したい場合はborder-top-style、 右辺のスタイルを指定したい場合はborder-right-style、 下辺のスタイルを指定したい場合はborder-bottom-style、左辺のスタイルを指定したい場合はborder-left-styleなどのプロパティで適応させることができます。
参考URL
4.2. Line Patterns: the ‘border-style’ properties - W3C
登録日 : 2014年01月25日 最終更新日 : 2014年1月26日
同じカテゴリー(Border)のエントリー
- border
- border-left
- border-bottom
- border-right
- border-top
- border-image
- border-image-repeat
- border-image-outset
- border-image-width
- border-image-slice
- border-image-source
- border-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-top-right-radius
- border-top-left-radius
- border-left-width
- border-bottom-width
- border-right-width
- border-top-width
- border-width
- border-left-style
- border-bottom-style
- border-right-style
- border-top-style
- border-style
- border-left-color
- border-bottom-color
- border-right-color
- border-top-color
- border-color