投稿者: Linlin

（例）【CSS】borderの使用方法

See the Pen
border by linlin (@linlin098765)
on CodePen.

<p class="sample1">border</p>
<p class="sample2">border</p>
<p class="sample3">border</p>
<p class="sample4">border</p>
<p class="sample5">border</p>
<p class="sample6">border</p>
<p class="sample7">border</p>
<p class="sample8">border</p>
<p class="sample9">border</p>
<p class="sample10">border</p>
<p class="sample11">border</p>
<p class="sample12">border</p>

p.sample1 {border: double 10px gray;}
p.sample2 {border: inset 10px gray;}
p.sample3 {border: medium solid gray;}
p.sample4 {border-style: solid;}
p.sample5{border-style: solid double groove ridge;}
p.sample6{border-style: solid; border-width: 5px 10px 15px 20px;}
p.sample7{border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff;}
p.sample8{border-top: double 10px gray;}
p.sample9{border-style: solid;border-top-color: red;border-top-style: dotted;border-top-width: 5px;}
p.sample10{border-style: solid;border-bottom-color: red;border-bottom-style: dotted;border-bottom-width: 5px;}
p.sample11{border-style: solid;border-right-color: red;border-right-style: dotted;border-right-width: 5px;}
p.sample12{border-style: solid;border-left-color: red;border-left-style: dotted;border-left-width: 5px;}

【CSS】border：ボーダーのスタイル・太さ・色を指定する

　CSSのborderは、ボーダーのスタイル・太さ・色・ボーダーの種類をまとめて指定できるプロパティです。
　borderプロパティでは、上下左右に別々のボーダーを指定することはできません。

borderのスタイル

• none
  ボーダーの太さ０、つまりボーダーは表示されない。ボーダーが重なる場合は他が優先される（初期値）
• hidden
  ボーダーの太さ０、ボーダーは表示されない。ボーダーが重なる場合はこちらが優先される
• solid
  １本線のボーダー
• double
  ２本線のボーダー
• groove
  立体的で窪んだボーダー
• ridge
  立体的で隆起したボーダー
• inset
  topとleftのボーダーが暗く、bottomとrightのボーダーが明るく、ボーダーで囲まれた領域全体が立体的に窪んだボーダー
• outset
  topとleftのボーダーが明るく、bottomとrightのボーダーが暗く、ボーダーで囲まれた領域全体が立体的に隆起したボーダー
• dashed
  破線のボーダー
• dotted
  点線のボーダー

borderの太さ

• 数値
  px, em,exなど
• キーワード
  thin, medium,thickで指定。左から順に太くなる