MitoRoid -CSS-枠線(ボーダー)

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プロパティの値を１つだけ記述すると枠の四辺に適用されます。

上下と左右を指定

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;

MitoRoid