サイトマップ
トップページ > CSS > プロパティ一覧 > border > border-xxx（最終修正日:2007-03-06）
はじめに
HTML/XHTML
CSS
CSS概要
CSS入門
プロパティ一覧
color
background
border
border-xxx
border-style
border-xxx-style
border-width
border-xxx-width
border-color
border-xxx-color
margin
padding
カラー確認（1677万色）
カラー確認（4096色）
ウェブセーフカラー一覧
カラーネーム一覧
雑多メモ
リンク集
リードメール

border-top、border-right、border-bottom、border-leftプロパティ

border-top、border-right、border-bottom、border-leftプロパティの概要
機能 ボーダー（枠線）の上下左右を個別に定義
指定可能な値 色、border-style, border-widthの値
初期値 色はcolorプロパティによる、スタイルは「none」、太さは、「medium」
継承 しない
適用可能なボックス 全て

border-top、border-right、border-bottom、border-leftプロパティは、要素のボーダー（枠線）のスタイルを上下左右で個別に定義します。枠線のスタイルについては、border-styleを参照してください。また、要素にcolorプロパティが定義されていると、枠線にその色が使用されます。


h2 {
    border-top: solid;
    border-bottom: solid;
}
div {
    color: #090;
    border-right: double;
    border-left: double;
}

確認画面

枠線の一括指定

border-xxxの値をスペースで区切って、複数指定すると、枠線の太さ、スタイル、色を一括して設定することができます。値を記述する順番は、どのような順番でも構いません。

border-xxxプロパティの使用には、この方法が最もよく使用される方法だと思います。


h2 {
    border-top: 1px solid #900;
    border-bottom: 1px solid #900;
}
div {
    border-left: dotted thick #900;
}
h3 {
    border-bottom: pink double 8px;
}

確認画面
前ページborder 上へこのページの先頭 border-style次ページ
Copyleft copyLeft 2009 W-D-L.NET
サイト管理者に連絡