個々の枠線のスタイルを一括で指定する。

上の枠線や下の枠線など、個々の枠線のみのスタイルを一括で指定する場合
上の枠線の場合は、border-top
右の枠線の場合は、border-right
下の枠線の場合は、border-bottom
左の枠線の場合は、border-left
のプロパティを使います。

それぞれのプロパティに設定する値は、borderのプロパティと同じで
border-style、border-width、border-colorのプロパティで設定する値を半角空白で区切って設定します。
指定する値の順番に決まりはありません。

CSSの記述例は、次のようになります。
p.bordertop{
border-top:solid 5px #ff0000;
}
p.borderright{
border-right:solid 5px #00ff00;
}
p.borderbottom{
border-bottom:solid 5px #0000ff;
}
p.borderleft{
border-left:solid 5px #00ffff;
}

このCSSを使ったHTMLの記述例です。
<p class="bordertop">上の枠線のスタイルを変更しました。</p>
<p class="borderright">右の枠線のスタイルを変更しました。</p>
<p class="borderbottom">下の枠線のスタイルを変更しました。</p>
<p class="borderleft">左の枠線のスタイルを変更しました。</p>

上の枠線のスタイルを変更しました。

右の枠線のスタイルを変更しました。

下の枠線のスタイルを変更しました。

左の枠線のスタイルを変更しました。

まとめ

• 個々の枠線に関するスタイルを一括指定する場合、
  上の枠線の場合、border-top
  右の枠線の場合、border-right
  下の枠線の場合、border-bottom
  左の枠線の場合、border-left
  のプロパティを使う。


• 値には、border-style,border-width
  border-colorのプロパティで設定する値を半角空白で区切って設定する。


• 指定する値の順番に決まりはない。

• ホーム
• ページトップ
• 同カテゴリの他エントリーを読む
• RSS