border【境界線】・border-○
border-width【境界線の幅】・border-○-width
border-style【境界線のスタイル】・border-○-style
border-color【境界線の色】・border-○-color
メモ
- 境界線用ショートハンドプロパティ (border【境界線】)
- 下記のプロパティを設定 (各プロパティはtop・right・bottom・left用のプロパティが存在)
- 参照
外部リンク
構文 (※記述方法)
ショートハンドプロパティ | ||
---|---|---|
border: | border-width (境界線の幅) / 省略:medium || border-style【境界線のスタイル (省略:none)】 || border-color【境界線の色 (省略:color プロパティ)】 | 境界線 |
border-top: | 境界線 (上) | |
border-right: | 境界線 (右) | |
border-bottom: | 境界線 (下) | |
border-left: | 境界線 (左) | |
境界線の幅 | ||
border-width: | border-width (境界線の幅) {1,4} (1) 1個指定 (上下左右) (2) 2個指定 (上下・左右) (3) 3個指定 (上・左右・下) (4) 4個指定 (上・右・下・左) | 境界線の幅 (時計回り) |
border-top-width: | border-width (境界線の幅) | 境界線の幅 (上) |
border-right-width: | 境界線の幅 (右) | |
border-bottom-width: | 境界線の幅 (下) | |
border-left-width: | 境界線の幅 (左) | |
border-width (境界線の幅) | thin【細い】 | medium【中間】 | thick【太い】 | 《length【長さ】》 | 境界線の幅 |
境界線のスタイル | ||
border-style: | border-style (境界線のスタイル) {1,4} (1) 1個指定 (上下左右) (2) 2個指定 (上下・左右) (3) 3個指定 (上・左右・下) (4) 4個指定 (上・右・下・左) | 境界線のスタイル (時計回り) |
border-top-style: | border-style (境界線のスタイル) | 境界線のスタイル (上) |
border-right-style: | 境界線のスタイル (右) | |
border-bottom-style: | 境界線のスタイル (下) | |
border-left-style: | 境界線のスタイル (左) | |
border-style (境界線のスタイル) | none【非表示: none 】 | hidden【非表示 (優先): hidden 】 | dotted【点線: dotted 】 | dashed【破線: dashed 】 | solid【実線: solid 】 | double【二重線: double 】 | groove【窪み: groove 】 | ridge【浮き出し: ridge 】 | inset【窪み (全体): inset 】 | outset【浮き出し (全体): outset 】 | 境界線のスタイル double【二重線】等は幅の指定が必要 |
境界線の色 | ||
border-color: | 《color【色】》 {1,4} (1) 1個指定 (上下左右) (2) 2個指定 (上下・左右) (3) 3個指定 (上・左右・下) (4) 4個指定 (上・右・下・左) | 境界線の色 (時計回り) |
border-top-color: | 《color【色】》 | 境界線の色 (上) |
border-right-color: | 境界線の色 (右) | |
border-bottom-color: | 境界線の色 (下) | |
border-left-color: | 境界線の色 (左) | |
border-color (境界線の色) | 《color【色】》 | 境界線の色 |
例
一括指定・個別指定
border11 (一括指定) border12 (個別指定)
スタイル
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset |