border【境界線】
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) １個指定 (上下左右)
(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 { 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>

dasheddotted
doublegroove
hiddeninset
noneoutset
ridgesolid