CSSのborderプロパティの使い方　基本から上下左右の見た目を変更まで

borderプロパティの基本

borderプロパティは、次のように指定します。

border: 幅線種線色;

幅・線種・線色は順不同です。

幅

単位をpxやthin（細い）、medium（普通）、thick（太い）で指定します。
※他の単位でも指定できますが、予期しない太さで表示される可能性があります。

pxで指定した場合、1から増えるごとに太くなります。

線種

線のタイプを指定します。

線種	タイプ	実例
none	線なし
solid	実線
dashed	破線
dotted	点線
double	二重線
groove	くぼみ
ridge	浮きだし
inset	立体くぼみ
outset	立体浮きだし

double以降の線種で見た目に変化を出すには、十分な太さを指定する必要があります。

線色

色のコードを指定します。
透過させることも可能です。

CSSの色指定がよくわからない方は、こちらをご覧ください。

cssの色指定は難しくない！ざっくり解説します
公開日:2019/09/26

幅・線種・線色を個別に指定

幅・線種・線色は、他のプロパティを使用することで、個別に設定することができます。

属性	プロパティ
幅	border-width
線種	border-style
線色	border-color

CSS

.smallbox{
border-width: 10px;
border-style: solid;
border-color: #FF0000;
height:50px;
width:50px;
}

左右上下の線を個別に指定する

枠線は、上下左右個別に指定することができます。
この場合、borderプロパティではなく、それぞれ対応するプロパティを使用します。

位置	プロパティ	実例
上線	border-top
下線	border-bottom
左線	border-left
右線	border-right

CSS

.smallbox4{
border-top: 13px double #32F522;
border-bottom: 15px dotted #f2a522;
border-left: 13px dashed #32a5F2;
border-right:11px solid transparent;
height:80px;
width:150px;
}

ボーダーと背景描画の範囲

太いボーダーで線種にdottedやdoubleを指定したり、透過色を指定すると、内側の背景がボーダー側にはみ出すことがあります。

実ははみ出すかどうかも、CSSで指定することができます。

background-clip: 範囲指定値;

範囲指定値	範囲	実例
border-box	ボーダー内に背景を描画
padding-box	ボーダーを含まずに背景を描画
content-box	パディングを含まずに背景を描画