境界線関連プロパティの値（CSS）

境界線関連プロパティの値（CSS）

border-top(right・bottom・left)-width

値（パラメータ）	内容
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位
thin	細線
medium	中太線（初期値）
thick	太線

border-styleプロパティにて境界線を表示しておく必要があります。

入力例	border-top-width: 3px;

サンプルコード（CSS別記）

/*CSSコード*/
.border-top-width {
　border-style: solid;
  border-top-width: 4px;
  border-right-width: 3px;
  border-bottom-width: 2px;
  border-left-width: 1px;
}

<!--HTMLコード-->
<div class="border-top-width">
  境界線の幅のトップを4px<br>
  境界線の幅のライトを3px<br>
  境界線の幅のボトムを2px<br>
  境界線の幅のレフトを1pxに設定しています
</div>

サンプルコード（CSS別記）の表示

border-width

値（パラメータ）	内容
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位
thin	細線
medium	中太線（初期値）
thick	太線

border-styleプロパティにて境界線を表示しておく必要があります。

入力例	border-width: 10px 8px 6px 4px;
値の設定例	10px;・・・「上右下左」を一括で設定 10px 20px;・・・「上下」と「右左」を設定 10px 20px 30px;・・・「上」と「右左」と「下」を設定 10px 20px 30px 40px;・・・「上」と「右」と「下」と「左」を指定

サンプルコード（CSS別記）

/*CSSコード*/
.border-width {
　border-style: solid;
  border-width: 10px 8px 6px 4px;
}

<!--HTMLコード-->
<div class="border-width">
  境界線の幅のトップを10px<br>
  境界線の幅のライトを8px<br>
  境界線の幅のボトムを6px<br>
  境界線の幅のレフトを4pxに設定しています
</div>

サンプルコード（CSS別記）の表示

border-top(right・bottom・left)-color

値（パラメータ）	内容
カラーコード	文字色を「#+6桁のコード」で指定します。 6桁の数字は左の2桁が赤、次の2桁が緑、次の2桁が青を表します。 それぞれの色強さは16進数（00～ff）で表現します。
カラーネーム	文字色を名称で指定します。
transparent	透明

border-styleプロパティにて境界線を表示しておく必要があります。

入力例	border-top-color: #ff0000;

サンプルコード（CSS別記）

/*CSSコード*/
.border-top-color {
　border: solid 3px;
  border-top-color: #ff0000;
  border-right-color: #ffff00;
  border-bottom-color: #0000ff;
  border-left-color: #000000;
}

<!--HTMLコード-->
<div class="border-top-color">
  境界線の色のトップを赤<br>
  境界線の色のライトを黄<br>
  境界線の色のボトムを青<br>
  境界線の色のレフトを黒に設定しています
</div>

サンプルコード（CSS別記）の表示

border-color

値（パラメータ）	内容
カラーコード	文字色を「#+6桁のコード」で指定します。 6桁の数字は左の2桁が赤、次の2桁が緑、次の2桁が青を表します。 それぞれの色強さは16進数（00～ff）で表現します。
カラーネーム	文字色を名称で指定します。
transparent	透明

border-styleプロパティにて境界線を表示しておく必要があります。

入力例	border-color: #ff0000 #ffff00 #0000ff #000000;
値の設定例	#ff0000;・・・「上右下左」を一括で設定 #ff0000 #ffff00;・・・「上下」と「右左」を設定 #ff0000 #ffff00 #0000ff;・・・「上」と「右左」と「下」を設定 #ff0000 #ffff00 #0000ff #000000;・・・「上」と「右」と「下」と「左」を指定

サンプルコード（CSS別記）

/*CSSコード*/
.border-color {
　border: solid 5px;
  border-color: #ff0000 #ffff00 #0000ff #000000;
}

<!--HTMLコード-->
<div class="border-color">
  境界線の色のトップを赤<br>
  境界線の色のライトを黄<br>
  境界線の色のボトムを青<br>
  境界線の色のレフトを黒に設定しています
</div>

サンプルコード（CSS別記）の表示

border-top(right・bottom・left)-style

値（パラメータ）	内容
none	線なし（初期値）
hidden	線なし（競合時はhiddenを優先）
solid	実線
double	二重線
dotted	点線
dashed	破線

入力例	border-top-style: solid;

サンプルコード（CSS別記）

/*CSSコード*/
.border-top-style {
  border-top-style: solid;
  border-right-style: double;
  border-bottom-style: dotted;
  border-left-style: dashed;
}

<!--HTMLコード-->
<div class="border-top-style">
  境界線のトップのスタイルを実線<br>
  境界線のライトのスタイルを二重線<br>
  境界線のボトムのスタイルを点線<br>
  境界線のレフトのスタイルを破線に設定しています
</div>

サンプルコード（CSS別記）の表示

border-style

値（パラメータ）	内容
none	線なし（初期値）
hidden	線なし（競合時はhiddenを優先）
solid	実線
double	二重線
dotted	点線
dashed	破線

入力例	border-style: solid double dotted dashed;
値の設定例	solid;・・・「上右下左」を一括で設定 solid double;・・・「上下」と「右左」を設定 solid double dotted;・・・「上」と「右左」と「下」を設定 solid double dotted dashed;・・・「上」と「右」と「下」と「左」を指定

サンプルコード（CSS別記）

/*CSSコード*/
.border-style {
　border-style: solid double dotted dashed;
}

<!--HTMLコード-->
<div class="border-style">
  境界線のトップのスタイルを実線<br>
  境界線のライトのスタイルを二重線<br>
  境界線のボトムのスタイルを点線<br>
  境界線のレフトのスタイルを破線に設定しています
</div>

サンプルコード（CSS別記）の表示

border-top(right・bottom・left)

値（パラメータ）	内容
border-widthで使用する値	境界線の太さを定義します
border-colorで使用する値	境界線の色を定義します
border-styleで使用する値	境界線のスタイルを定義します

border-styleプロパティにて境界線を表示しておく必要があります。

入力例	border-top: 5px #ff0000 solid;

サンプルコード（CSS別記）

/*CSSコード*/
.border-top {
  border-top: 5px #ff0000 solid;
  border-right: 3px #ffff00 double;
  border-bottom: 2px #0000ff dotted;
  border-left: 1px #000000 dashed;
}

<!--HTMLコード-->
<div class="border-top">
  境界線のトップを5px・赤・実線<br>
  境界線のライトを3px・黄・二重線<br>
  境界線のボトムを2px・青・点線<br>
  境界線のレフトを1px・黒・破線に設定しています
</div>

サンプルコード（CSS別記）の表示

border

値（パラメータ）	内容
border-widthで使用する値	境界線の太さを定義します
border-colorで使用する値	境界線の色を定義します
border-styleで使用する値	境界線のスタイルを定義します

border-styleプロパティにて境界線を表示しておく必要があります。

入力例	border: 10px ff0000 solid;

サンプルコード（CSS別記）

/*CSSコード*/
.border {
  border: 10px #ff0000 solid;
}

<!--HTMLコード-->
<div class="border">
  境界線（上右下左）の幅を10px<br>
  境界線（上右下左）の色を赤<br>
  境界線（上右下左）のスタイルを実線に設定しています
</div>

サンプルコード（CSS別記）の表示