目次を飛ばして本文へ パン屑リストへ
関連プロパティ

border-color

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
[ <色> | transparent ]{1,4} | inherit
初期値 簡略化プロパティなので定義しない
適用 すべての要素
継承 しない
レベル -
メディア visual

四辺のボーダーの色を指定します。

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'という4つのプロパティを一ヶ所で指定出来ます。'border'を用いて、ほかのプロパティと一括指定する事も出来ます。ただし、四辺の個別指定は出来ません。

値の書き方は、以下の通りです。0時から時計回り、足りない値は対辺から、と覚えると良いです。基本的にこの手の簡略化プロパティは、すべてそうです。
var { border-color: red }                /* 四辺とも red */
var { border-color: red green }          /* 上と下が red、右と左が green */
var { border-color: red green blue }     /* 上red、右と左green、下blue */
var { border-color: red green blue gray }/* 上red、右green、下blue、左gray */

ワンポイント・アドバイス初期値は文字の色。

キーワード解説
transparent
直訳すると「透明な」「透き通った」という意味で、この値の場合、ボーダーは透明になります。透明でも、幅はあります。"display: none"では無く、"visibility: hidden"という事です。

初期値には'color'の値を使います。つまり、前景色(文字の色)に合わせます。

結合ボーダーモデルの表の場合を除いて、ボーダーの透き間からは、背景関連プロパティで指定した背景が見えます。結合ボーダーモデルの場合は、その部分は透過になります。

注意点
  1. ボーダーの種類の初期値が[none]になっているので、ボーダーを表示させるには先ず、この値を変える必要があります。
CSS1とCSS2の相違点
  1. [transparent]というキーワードが追加されました。

page top
最終更新日:2018年07月18日
Copyright © 2002-2018 ばあど All Rights Reserved.