Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

BORDERボーダーTOPCSSPropertiesBorder

  1. border-colorボーダー(枠線)の色
  2. border-styleボーダー(枠線)の種類
  3. border-widthボーダー(枠線)の幅
  4. borderボーダーのショートハンドプロパティ

borderボーダーのショートハンドプロパティ

プロパティの値[ <border-width> || <border-style> || <border-color> ] | inherit
初期値各border-color, -style, -widthの値(個別プロパティの値)
対象要素全要素
継承しない
%無効
メディアvisual
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

ボーダー(上下左右)の線種、色、幅を一括指定するショートハンドプロパティです。記述順は自由ですが、省略した値は初期値が適用されます。<border-style>を省略した場合は初期値であるnoneが適用されるため、ボーダーが表示されません。

Box model border
プロパティの書式機能
border: Style Color Width個別プロパティの値をまとめて指定
border: inherit継承

プロパティの記述例

下の例はどちらも同じ表示結果となります。

div.example	{
		border-style : solid ;
		border-color : #777 ;
		border-width : 2px ;
		}
div.example	{border : solid #777 2px}

識別子によるプロパティの個別記述

-top, -right, -bottom, -left の識別子を付加することにより、上下左右のボーダーの個別指定が可能です。

border-top : Style Color Width上部ボーダーの一括指定
border-right : solid #000 1px右側ボーダーの一括指定
border-bottom : dotted navy medium下部ボーダーの一括指定
border-left : double #efefef 3px左側ボーダーの一括指定
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.