ホーム > HTML > 枠線(ボーダー)

CSS -枠線(ボーダー)-

ボックスのボーダーは、「スタイル(形状)」「色」「幅」を指定することができます。
余白の設定同様に、上下左右を個別に指定したり、一括で指定したりすることができます。

ボーダーのスタイルを指定

ボーダーのスタイルを指定する場合は、border-styleプロパティを使用します。

ボーダーの色や幅を指定しても、ボーダーのスタイルを指定していない場合、枠線は表示されません。

使用例

border-style : solid;

説明
none 表示させない(初期設定)
solid 1本線
double 2本線
groove へこんで見える
ridge 出っ張って見える
inset 枠の内側がへこんで見える
outset 枠の内側が出っ張って見える
dashed 破線
dotted 点線

ボーダーの幅

ボーダーの幅を指定する場合は、border-widthプロパティを使用します。

設定する値は、pxやemなどの単位つき数値のほか、キーワードも使用可能です。

キーワード
  • midium・・・デフォルト
  • thin・・・細め
  • thick・・・太め

border-widthプロパティは、省略可能です。その場合、「midium」が 適用されます。

使用例

border-style:solid;
border-width:1px;

ボーダーの色

ボーダーの色を指定する場合は、border-colorプロパティを使用します。

色の指定方法は、文字色を指定する場合と同じです。

border-colorプロパティは、省略可能です。その場合、テキストに指定された色で表示されます。

使用例

border-style:solid;
border-color : #cc3300;

ボーダーの「スタイル」「幅」「色」を一括で指定

borderプロパティを利用すれば、スタイル」「幅」「色」を まとめて記述することができます。

値は、半角スペースで区切ります。指定の順番は特に関係ありません。

使用例

border : solid 1px #cc3300;

上下左右の個別に指定する場合

border-styleプロパティ、border-widthプロパティ、border-colorプロパティの値を1つだけ 記述すると枠の四辺に適用されます。

上下と左右を指定

border-style:上下のスタイル  左右のスタイル;
border-width:上下の幅  左右の幅;
border-color:上下の色  左右の色;

上、左右、下を指定

border-style:上のスタイル  左右のスタイル  下のスタイル;
border-width:上の幅  左右の幅  下の幅;
border-color:上の色  左右の色  下の色;

上下左右、それぞれを指定

border-style:上のスタイル  右のスタイル  下のスタイル  左のスタイル;
border-width:上の幅  右の幅  下の幅  左の幅;
border-color:上の色  右の色  下の色  左の色;

個別に指定

border-top : 上側のボーダー指定;
border-right : 右側のボーダー指定;
border-left : 左側のボーダー指定;
border-bottom : 下側のボーダー指定;

  例 : border-top: solid 1px #333333;