[CSS] ボーダー(Border)の太さを指定する

ボーダーは、下図のグレー色の境界線の太さを指定します。ボーダーの太さ指定方法は、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。

ボーダーの太さを表示するには、ボーダーの種類を指定しておく必要があります。

ボーダーの太さを個別に指定する。

px	値をピクセル単位で指定する。 1px
tin	1本線(実線)で表示する。 thin
medium	通常の太さ(中間の太さ)を指定する。(初期値) medium
thick	太い線で表示する。 thick

border-styleを個別に指定する

ボックスの境界線の太さを上下左右に個別に指定できます。

上下左右の部分に、それぞれtop、right、bottom、leftが入ります。ボーダーは太さや色だけを指定しても表示されないので、ボーダーを表示させるには、太さや色だけでなく種類も同時に指定する必要があります。

border-上下左右-width：値;

<style>
 .border {
    border-style:solid;
    border-top-width: thin;
    border-bottom-width: thick;
    border-left-width: 20px; 
    border-right-width: medium;
    border-radius: 2px;
 　}
</style>

　sample

borderの太さをまとめて指定する

ボーダーの太さをまとめて指定することができます。上下左右のボーダーの太さの値を半角スペースで区切って任意の順序で指定します。

値は、数値にピクセル単位をつけるか、キーワードで指定したりします。以下の4パターンで表記します。

border-width：値;

<style>
 .border1{
   border-style: solid; 
   border-width: 3px;/*上下左右*/
   } 
 .border2{
   border-style: solid; 
   border-width: 3px thin; /*上下・左右*/
   }
 .border3{
   border-style: solid;
   border-width: 3px thin thick;/*上・左右・下*/
   } 
 .border4{
   border-style: solid;
   border-width: medium thin 20px thick;/*上・右・下・左*/
   }  
</style>

border-width: medium thin 20px thick;