1つの要素にCSSだけで二重ボーダーをつける3つの方法 | Cappee Design

@cappeeです。 ひとつのdivに対して、CSSだけで簡単に二重のボーダーをつけることができます。 box-shadow CSS3の box-shadow を使えば1行で二重のボーダーをつけることができます。最初に内側のボーダー、次に外側のボーダーを指定します。外側のボーダーは内側を合わせた数値を記述してください。 対応ブラウザですが、～IE8は表示されません。ただ、もうIE6と7の需要は少ないですが、IE8をどこまで対応させるかの判断になると思います。あと、JavaScriptやPIEなどを使うか。 .doubleBorder { box-shadow: 0 0 0 3px #CCC, 0 0 0 4px #999; } CSS3の対応状況はこちらの「CSS3プロパティ＆ブラウザ対応一覧」を参考にしてください。 borderとoutline border と outline で二重

[kiyokichi]

:afterと:beforeを使用して2重線をつくる。幅・高さを決め打ちしなくても例えば:beforeに別色4px、:afterにベース色2px指定すれば2重線ぽく見える。

[masapon49]

ふむふむ。無駄なtag組みたくないのでいいなぁ

[machida_fjord]

“outline: solid 1px #999”

[rosso18hiro]

“position: absolute; top: 1px; content: ''; border: 1px solid #CCC; width: 296px; height: 296px;”