CSS-Tip: Doppelte Rahmen um div-Boxen erstellen

27. Dezember 2010

sura1

Doppelte Rahmen um div-Boxen mit Pseudo-Klassen :after + :before

Ich möchte Ihnen heute das kurze Tutorial “Multiple Borders with Simple CSS” von Jeffrey Way von NetTuts+ vorstellen.

In diesem wird erklärt, wie Sie doppelte Rahmen um div-Boxen ohne Einsatz von Grafiken, sondern nur mit CSS unter Verwendung der Pseudo-Klassen :after und :before erstellen können.

Sehen Sie sich bitte dazu das YouTube-Video an

Ich habe das vorliegende Beispiel von Jeffrey Way ein wenig bearbeitet und möchte Ihnen nachfolgend meine Version vorstellen. Die Änderung ist geringfügig und betrifft nur die Größe der div-Box. Die Höhe und Breite der Box betragen bei mir jeweils 400 Pixel (Original: je 200 Pixel).

Quick-Tip ansehen | Fertiges Beispiel herunterladen (Zip-Datei: 4,0 KB)

HTML-Quellcode:

<body>
     <div id="box"></div>
</body>

CSS-Anweisungen:

body { background: #d2d1d0; }
#box {
     background: #f4f4f4;
     border: 1px solid #bbbbbb;
     width: 400px;
     height: 400px;
     margin: 60px auto;
     position: relative;
}
#box:before {
     border: 1px solid white;
     content: '';
     width: 398px;
     height: 398px;
     position: absolute;
}
#box:after {
     content: '';
     position: absolute;
     width: 396px;
     height: 396px;
     border: 1px solid #bbbbbb;
     left: 1px; top: 1px;
}

Quick-Tip ansehen | Fertiges Beispiel herunterladen (Zip-Datei: 4,0 KB)

Das Beispiel wird in allen gängigen Browsern in der jeweils neuesten Version korrekt dargestellt. Hinsichtlich des Internet Explorers wird festgestellt, dass der Quick-Tip bis zum IE7 nicht funktioniert. Lesen Sie bitte dazu auch die zahlreichen Kommentare im Original-Artikel “Multiple Borders with Simple CSS” – dort erfahren Sie auch andere Möglichkeiten, wie Sie doppelte Rahmen um div-Boxen realisieren können!