枠線(ボーダー)のスタイルを紹介します。
border-styleプロパティ
枠線の種類を指定します。枠線の種類は以下のとおりです。
- solid
- 実線
- double
- 二重線
- groove
- 溝線
- ridge
- 稜線
- inset
- 領域がくぼんで見える
- outset
- 領域が浮き出て見える
- none(デフォルト)
- 枠線なし
- hidden
- 枠線を表示しない(太さは適用される)
- dashed
- 破線
- dotted
- 点線
また、上下左右個別に指定する場合は、「border-top-style」「border-left-style」「border-right-style」「border-bottom-style」プロパティを使用します。
border-widthプロパティ
枠線の太さを指定します。数値+単位、またはキーワードで指定されます。
- thin
- 細線
- medium
- 通常の太さの線
- thick
- 太線
また、上下左右個別に指定する場合は、「border-top-width」「border-left-width」「border-right-width」「border-bottom-width」プロパティを使用します。
border-colorプロパティ
枠線の色を指定します。色はカラーネーム、カラーコード(16進数)、カラーコード(10進数)で指定します。
また、上下左右個別に指定する場合は、「border-top-color」「border-left-color」「border-right-color」「border-bottom-color」プロパティを使用します。
borderプロパティ
枠線のスタイル(線種、太さ、色)を半角スペースで区切り、まとめて指定します。
また、上下左右個別に指定する場合は、「border-top」「border-left」「border-right」「border-bottom」プロパティを使用します。