borderの使い方

borderのつかいかた

{border:値;}

☆説明

borderの指定をまとめてするには

「style,width,color,」の指定をまとめてすることができます。記述の順番は関係ありません。また、省略しても大丈夫です。通常この書き方を使います。

ボックスの概念を解っているとスムーズに理解できます。詳しくは下記の記事を参考にしてください。
CSSのボックスによる配置方法の基本概念

記述の際は半角スペースで区切ってください。borderの後に値を記述するだけです。下記のコードを参考に。

値を書けばOKです。(実線、5px、赤)

border-style

{border-style:値;}

☆説明

枠線のスタイル(上、右、下、左)を指定する。

border-styleで上下左右を一括して指定することもできますし、上(top)、右(right)、下(bottom)、左(left)それぞれ指定することもできます。

-styleを省き、このように書くことも出来ます。
border-top:1px solid red;

  • border-top-style:値;
  • border-right-style:値;
  • border-bottom-style:値;
  • border-left-style:値;

枠線の例です。dottedは点線です。

機能
none 枠線なし
solid 実線
dotted 点線
dashed 破線
double 二重線
groove 立体的な線

border-color

{border-color:値;}

☆説明

枠線の色を指定します。

枠線を緑色にしました。

border-width

{border-width:値;}

☆説明

枠線の太さ(上、右、下、左)を指定する

border-widthで上下左右を一括して指定することもできますし、上(top)、右(right)、下(bottom)、左(left)それぞれ指定することもできます。
値には通常ピクセル(px)を指定します。

  • border-top-width:値;
  • border-right-width:値;
  • border-bottom-width:値;
  • border-left-width:値;

太さを5px、dottedは点線です。

通常ピクセルで太さの指定をしますが、下記の様な指定方法もあります。

機能
thin 細い線
medium 標準線
thick 太い線