border【境界線】・border-○
border-width【境界線の幅】・border-○-width
border-style【境界線のスタイル】・border-○-style
border-color【境界線の色】・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) １個指定 (上下左右)
(2) ２個指定 (上下・左右)
(3) ３個指定 (上・左右・下)
(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) １個指定 (上下左右)
(2) ２個指定 (上下・左右)
(3) ３個指定 (上・左右・下)
(4) ４個指定 (上・右・下・左) 		境界線のスタイル
 
(時計回り)
 
 
 
border-top-style: border-style (境界線のスタイル) 境界線のスタイル (上)
border-right-style:境界線のスタイル (右)
border-bottom-style:境界線のスタイル (下)
border-left-style:境界線のスタイル (左)
border-style (境界線のスタイル)
   none【非表示： none 】

| hidden【非表示 (優先)：】

| dotted【点線： dotted 】

| dashed【破線： dashed 】

| solid【実線： solid 】

| double【二重線： double 】

| groove【窪み： groove 】

| ridge【浮き出し： ridge 】

| inset【窪み (全体)： inset 】

| outset【浮き出し (全体)： outset 】

境界線のスタイル
double【二重線】等は幅の指定が必要
境界線の色
border-color: 《color【色】》 {1,4}

(1) １個指定 (上下左右)
(2) ２個指定 (上下・左右)
(3) ３個指定 (上・左右・下)
(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 { width: 300px; padding: 5px; border-spacing: 20px; }
.table2 td { background-color: lightcyan; }
.none2 { border: 1px black none; }
.hidden2 { border: 1px black hidden; }
.dotted2 { border: 4px red dotted; }
.dashed2 { border: 4px red dashed; }
.solid2 { border-width: 16px; border-style: solid; border-color: red green blue black; }
.double2 { border: 16px red double; }
.groove2 { border-width: 32px; border-style: groove; }
.ridge2 { border-width: 32px; border-style: ridge; }
.inset2 { border-width: 32px; border-style: inset; }
.outset2 { border-width: 32px; border-style: outset; }
</style>

<table class="table2">
  <tr><td class="none2">none</tr>
  <tr><td class="hidden2">hidden</tr>
  <tr><td class="dotted2">dotted</tr>
  <tr><td class="dashed2">dashed</tr>
  <tr><td class="solid2">solid</tr>
  <tr><td class="double2">double</tr>
  <tr><td class="groove2">groove</tr>
  <tr><td class="ridge2">ridge</tr>
  <tr><td class="inset2">inset</tr>
  <tr><td class="outset2">outset</tr>
</table>
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset