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【非表示 (優先):

| 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>

dasheddotted
doublegroove
hiddeninset
noneoutset
ridgesolid