[CSS] 枠線を引く（border）

CSSで枠線を引くには、名前にborderが付いたCSSを使用します。

枠線に関するCSS

CSS名にborderが付いたプロパティ（枠線に関するプロパティ）には、以下のものがあります。

【borderプロパティ】

プロパティ	説明	設定例
border-width	枠線の太さを指定する 数値(px)または キーワードで指定します 　細：thin 　中：medium 　太：thick	border-width:1px border-width:thick;
border-style	枠線のスタイルを指定する →詳細は以下をご覧ください。 　[CSS] 枠線スタイル一覧	border-style:solid; border-style:dashed;
border-color	枠線の色を指定する →色は以下をご覧ください。 　[CSS] 主要色一覧	border-color:red; border-color:#ff0000;
border	枠線の太さ、スタイル、色を同時に指定する ※３つ同時に指定する場合に使用できます。	border:1px solid #808080; border:thin double blue;

枠線を表示させる場合は、上記プロパティのうちスタイルの指定は必須です。

枠線を引くサンプル

例）枠線（実線）を引く

あいうえお

例）太さ1pxの実線を引く

あいうえお

例）青色の２重線を引く

あいうえお

例）太さ3px、赤色の点線を引く

または

あいうえお

上下左右を指定して枠線を引く

上下左右を指定して枠線を引くこともできます。
やり方としては上記プロパティのborderを、
border-left、border-right、border-top、border-bottom　に指定替えをすればOKです。

【上下左右のみに枠線を指定するCSS】

指定	説明	例
border-left	左側の枠線を指定	border-left border-left-style border-left-width border-left-color
border-right	右側の枠線を指定	border-right border-right-style border-right-width border-right-color
border-top	上側の枠線を指定	border-top border-top-style border-top-width border-top-color
border-bottom	下側の枠線を指定	border-bottom border-bottom-style border-bottom-width border-bottom-color

例）左側のみ実線を引く

あいうえお

例）左側と下側に実線をを引く

あいうえお

例）上（実線）、右（二重線）、左（点線）、下（波線）を引く

あいうえお

関連項目

• [CSS] 枠線スタイル一覧
• [CSS] 主要色一覧