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

  • あとで読みたい人は…

@cappeeです。

ひとつのdivに対して、CSSだけで簡単に二重のボーダーをつけることができます。

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

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 で二重ボーダーをつけます。
IE8にも対応しており、~IE7も border の方は正常に表示されるので背景色と同じ色でなければ一応枠線は見える状態ですし、こちらの方が安全といえば安全です。
また、二重のボーダーをつけてさらにボックスにシャドウもつけたい、なんてワガママもこちらの指定+ box-shadowで実現できます。

.doubleBorder{
 border: solid 3px #CCC;
 outline: solid 1px #999;
}

ひとつ注意ですが、もしoutlineを使った二重ボーダーの枠に、ポジションを使ってリボンなどのアイコンを配置する場合、Operaではz-indexを使ってもoutlineの方が優先されてアイコンと線がかぶってしまいます。そういった使い方をする場合は、box-shadowを使用し、IE6~8はCSSハックで1つのボーダーのみ表示させるなどの対応が必要になります。

疑似要素

:before や :after の擬似要素を使えば二重線だけでなく三重線も実現出来ます。
ただし、幅と高さを固定してpositionでボーダー分ずらすというやり方なので高さが可変の場合には不向きです。
(下でさらに擬似要素をつかった可変対応バージョンも紹介しています。)

.tripleBorder{
position: relative;
background: #FFF;
border: 1px solid #999;
width: 300px;
height: 300px;
}
.tripleBorder:before {
position: absolute;
content: '';
border: 1px solid #FFF;
width: 298px;
height: 298px;
}
.tripleBorder:after {
position: absolute;
top: 1px;
content: '';
border: 1px solid #CCC;
width: 296px;
height: 296px;
}

もうひとつ、高さが可変の場合でも使える擬似要素でのやり方があります。
こちらもpositionを使ってますがz-indexとmin-height:100%;の指定により高さを可変にしています。

.doubleBorder{
    border: 1px solid #CCC;
    position: relative;
    z-index: 1;
}
.doubleBorder:before{
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    border: 1px solid #999;
    width: 500px;
    padding-bottom: 2px;
    min-height: 100%;
    z-index: 10;
}

(2013.3.1追加)

[参考サイト]
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 
Quick Tip: Multiple Borders with Simple CSS

Pocket
article clipper 1つの要素にCSSだけで二重ボーダーをつける3つの方法

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>