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

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

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

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;