枠線のスタイル


枠線(ボーダー)のスタイルを紹介します。

border-styleプロパティ

枠線の種類を指定します。枠線の種類は以下のとおりです。

solid
実線
double
二重線
groove
溝線
ridge
稜線
inset
領域がくぼんで見える
outset
領域が浮き出て見える
none(デフォルト)
枠線なし
hidden
枠線を表示しない(太さは適用される)
dashed
破線
dotted
点線

また、上下左右個別に指定する場合は、「border-top-style」「border-left-style」「border-right-style」「border-bottom-style」プロパティを使用します。

border-widthプロパティ

枠線の太さを指定します。数値+単位、またはキーワードで指定されます。

thin
細線
medium
通常の太さの線
thick
太線

また、上下左右個別に指定する場合は、「border-top-width」「border-left-width」「border-right-width」「border-bottom-width」プロパティを使用します。

border-colorプロパティ

枠線の色を指定します。色はカラーネーム、カラーコード(16進数)、カラーコード(10進数)で指定します。
また、上下左右個別に指定する場合は、「border-top-color」「border-left-color」「border-right-color」「border-bottom-color」プロパティを使用します。

borderプロパティ

枠線のスタイル(線種、太さ、色)を半角スペースで区切り、まとめて指定します。
また、上下左右個別に指定する場合は、「border-top」「border-left」「border-right」「border-bottom」プロパティを使用します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です