border-styleの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)
目次
1.border-styleとは?
border-styleプロパティはボーダーのスタイルをまとめて指定するショートハンドです。
値の指定方法は以下の通りです。
{ border-top-style: 値; }
値の指定方法
値の指定方法は以下の通りです。
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
それぞれの値は半角スペースで区切って4つまで指定でき、上辺、右辺、下辺、右辺の順に適用されます。
値を省略した場合、以下のような値になります。
- 値が1つの場合:すべての辺に値が適用されます。
- 値が2つの場合:1つ目の値が上下辺、2つ目の値が左右辺に適用されます。
- 値が3つの場合:1つ目の値が上辺、2つ目の値が左右辺、3つ目の値が下辺に適用されます。
2.border-styleの使い方
それではborder-styleプロパティの使い方をみていきましょう。
div {
border-style: dotted;
}
上記のようにすることで連続した丸い点を表示させることができます。
他にも値を設定できるのでいろいろと試してみることをお勧めします!