DN*BLOG

CSS3 – border-color

border-colorはFirefoxが対応しています。
色の設定をうまくやると、グラデーションの効果を出す事も可能です。

border-color

border-colorの例です。Firefoxで見てください。

Firefoxで見ると、グラデーションっぽいボーダーの装飾ができます。
色の設定で虹色に出来たり、シマシマの線ができたりします。

CSSソース

.border-color {
	border: 8px solid #000;
	-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	padding: 5px 5px 5px 15px;
}

一番左が外側のボーダーカラーで、一番右が内側になります。

Return to the page