border【境界線】
border-width【境界線の幅】 ・border-style【境界線のスタイル】 ・border-color【境界線の色】
メモ 外部リンク 構文 例
メモ
- 境界線用ショートハンドプロパティ (border【境界線】)
- 下記のプロパティを設定 (各プロパティはtop・right・bottom・left用のプロパティが存在)
- border-width【境界線の幅】
- border-style【境界線のスタイル】
- border-color【境界線の色】
- 参照
外部リンク
構文 (※記述方法)
ショートハンドプロパティ | ||
---|---|---|
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【色】》 | 境界線の色 |
例
<style>
.border11 { border:2px red solid; padding:1px 5px; }
.border12 { border-width:2px; border-style:solid; border-color:red; padding:1px 5px; }
</style>
<p>
<span class="border11">border11</span>
<span class="border12">border12</span>
</p>
border11 border12
<style>
.table2 { border:4px blue solid; width:300px; padding:5px; }
.table2 td { background-color:lightcyan; }
.dashed2 { border:2px red dashed; }
.dotted2 { border:2px red dotted; }
.double2 { border:4px red double; }
.groove2 { border-width:8px; border-style:groove; }
.hidden2 { border:1px black hidden; }
.inset2 { border-width:8px; border-style:inset; }
.none2 { border:1px black none; }
.outset2 { border-width:8px; border-style:outset; }
.ridge2 { border-width:8px; border-style:ridge; }
.solid2 { border-width:6px; border-style:solid; border-color:red green blue black; }
</style>
<table class="table2">
<tr><td class="dashed2">dashed<td class="dotted2">dotted</tr>
<tr><td class="double2">double<td class="groove2">groove</tr>
<tr><td class="hidden2">hidden<td class="inset2">inset</tr>
<tr><td class="none2">none<td class="outset2">outset</tr>
<tr><td class="ridge2">ridge<td class="solid2">solid</tr>
</table>
dashed | dotted |
double | groove |
hidden | inset |
none | outset |
ridge | solid |