HOMEUPBoxの表示プログラム

border

w3cのborderのborder-xxxx-widthとかのxxxxはtop、right、bottom、leftの順になっているけど時計回りに指定しているんだと思います。

borderの幅

border-top-width, border-right-width, border-bottom-width, border-left-width
値 幅 | inherit
幅はthin(細線)、midium(中線)、thick(太線)、長さを指定します。
初期値 midium

borderの上、右、下、左の幅を指定します。

border-width
値 前述のborder-top-width等の所で指定した幅を1から4個またはinheritを記述します。

borderの幅をまとめて指定します。

指定した値の個数によって設定されるborderが以下のようになります。(4個指定は前述したように時計回り)

設定値が一つの時、例えばborder-width : thin;の場合はすべての幅が指定された値に設定されます。

設定値が二つの時、border-width : thin thick;だとのように上下、左右の設定。

border-width : thin thick 0.5em;だと上、左右、下。

border-width : thin thick 1em 2em;だと全部別々に指定になります。

borderの色

borderの色もborderの幅と同様に設定します。このあたりの記述の仕方が統一されていて綺麗ですね。

border-top-color,border-right-color,border-bottom-color,border-left-color
値
色 | transparent | inherit

それぞれborderの上、右、下、左の色を設定します。

border-color
値 色またはtransparentを1から4個、またはinheritひとつ。
ちょっと見えにくいのでもう一度書きますが
border-color : transparent blue red green;を指定しています

上の画像はborder-color:transparent blue red green;を指定しています。

borderの種類

手持ちのブラウザで表示してみるとFirefox3とIE7だと点線(dotted)の点がは丸に、KonquerorとWindowsXPのSafari3.1.2だと四角で表示されます。

border-top-style,border-right-style,border-bottom-style,border-left-style
値 スタイル | inherit
none
なし。 boxの幅も0として計算されます。
hidden
noneとよくにています。 tableのプロパティborder-collapse : collapse;が指定された時にborderを描かないようにします。(tableにて説明予定)
dotted
点線。
dashed
破線。
solid
実線。
double
二重線。
groove
凹？適当な言葉を思いつきません。
ridge
凸？上記に同じく(ry
inset
全体凹？全体が沈んだような感じ。うまい言葉を思いつきません。
outset
全体凸？私はよく使います。JavaScriptと連携してボタンの代わりとか。
border-style
値 スタイルを1から4個。またはinherit

border-widthと同じようにスタイルの個数によって設定されるborderがかわります。

border-style : dotted solid dashed groove;を設定するとこんな感じです。

borderの幅、色、種類

border-top,border-right,border-bottom,border-left
値 [ 幅 || 種類 || 色 ] | inherit
inheritか幅/種類/色のうちの任意のものを並べます。
幅/種類/色の並び順は自由です。
border
値 [ 幅 || 種類 || 色 ] | inherit
inheritか幅/種類/色のうちの任意のものを並べます。
幅/種類/色の並び順は自由です。
前述のborder-widthやborder-colorと違って4個とか指定できません。
ここでは
border:4px solid red;
border-style:dashed solid;
と設定しています。

CSS3 border-radius(角丸)

CSS3からはborder-radiusというプロパティがあってborderの角の丸みを指定することができます。

Mozilla(Firefox)、Opera、Safariでの対応

Mozilla(Firefox)、Opera、Safari等のブラウザでは独自の拡張で部分的にborder-radiusに対応しています。

span.kadomaru {
    border: 1px solid black;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -opera-border-radius: 1em;
}

上記のようにスタイルシートを書いておいてスタイルを適用すると、こんな風になります。

残念ながらIEではborder-radiusに相当する独自拡張がありませんので注意。

border-radius プロパティ

前述したのは各ブラウザの独自拡張で、w3cを見ると↓のようになっていました。

border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-top-left-radius,border-radius
値<長さ1> <長さ2>?
border-radius

一つか二つの長さを指定します。長さが二つ指定された場合は最初の長さが水平方向の長さを二つ目の長さが垂直方向の長さを表します。長さが一つだけ指定された場合は水平/垂直方向の長さは同じになります。

CSS3 その他

border-styleが増えてwave(波線)、dot-dash(一点鎖線)、dot-dot-dash(二点鎖線)が使えるようになるみたいです。waveはおもしろそう。

他にもいろいろと面白そうなプロパティがあります。→ CSS3 Backgrounds and Borders Module W3C Working Draft 16 February 2005

HOMEUPBoxの表示プログラム