ボーダー属性に関してのシート｜CSSプロパティ

CSS

CSSで制御する事のできるボーダー（領域の枠線）に関する属性のリストです。

CSSプロパティのボーダー属性に関するリスト

border: ★ ★ ★;※ボーダーの値を一度に指定
border-width: ★;※線の太さを指定
border-color: ★;※線の色を指定
border-style: ★;※線の種類を指定

border: ★ ★ ★;

個別プロパティ	border-top border-right border-bottom border-left

ボーダー用をを一括指定できる属性。指定できる値は線の太さ・色・線種。囲みたくない場合はtop・right・bottom・leftと個別で属性を指定する。

/* 全てを指定した場合 */
border: 1px solid #777777;

/* 左右だけにボーダーを引きたい場合 */
border-left: 1px solid #777777;
border-right: 1px solid #777777;

border-width: ★;

個別プロパティ	border-top-width border-right-width border-bottom-width border-left-width
数値指定（相対）	px（ディスプレイのドット） em（1em = 100%） ex（xの大きさ） %
数値指定（絶対）	mm（1mm） cm（10mm） in（2.54cm） pt（1in = win:72pt / mac:96pt） pc（12pt）
値	thin（細い線） medium（中間の太さ） thick（太い線）

ボーダー要素の四方の太さを指定できる要素。他の属性と同様に上下・左右、上・左右・下、上・右・下・左と値の省略化が可能。

/* 四方が同等の太さの場合 */
border-width: 5px;

/* 上下、左右をまとめて変更 */
border-width: 5px 10px;

/* 左右みの太さを変更 */
border-width-right: 5px;
border-width-left: 10px;

border-color: ★;

値	transparent（透明色初期値）カラー名 #RGB

ボーダー要素の四方の線色を指定できる属性。他の属性と同様に上下・左右、上・左右・下、上・右・下・左と値の省略化が可能。

/* 四方が同等の色の場合 */
border-color: #ff0000;

/* 上下、左右をまとめて変更 */
border-color: #ff0000 #ffffff;

/* 左右みの色を変更 */
border-color-right: #ff0000;
border-color-left: #ffffff;

border-style: ★;

値	none（線無） hidden（線無） solid（実線） double（二本の線） dotted（点線） dashed（破線） groove（谷型の線） ridge（山型の線） inset（凹型の線） outset（凸型の線）

ボーダー要素の四方の線種を指定できる属性。他の属性と同様に上下・左右、上・左右・下、上・右・下・左と値の省略化が可能。

/* 四方が同等の線種の場合 */
border-color: solid;

/* 上下、左右をまとめて変更 */
border-color: solid dotted;

/* 左右みの線種を変更 */
border-color-right: solid;
border-color-left: dotted;