Transparente Rahmen (border) mit CSS

Transparente Umrandungen mit Hilfe der border-Eigenschaft scheinen auf den ersten Blick kein Problem zu sein. In der Praxis stellt sich jedoch schnell heraus, dass es nicht so funktioniert, wie in der Theorie gedacht. Und so entstehen oft völlig überflüssige <div>-Verschachtelungen. Um euch vor solch peinlichen Konstruktionen zu bewahren, zeigen wir euch in diesem Beitrag wie es sauberer umgesetzt wird und rufen in diesem Zusammenhang die Eigenschaft background-clip in Erinnerung

Die background-clip-Eigenschaft

Die CSS-Eigenschaft background-clip legt fest, über welche Boxen des Box Modells ein Hintergrund gerendert wird. Der Standardwert ist border-box. Daher hilft es nicht, einfach nur einen transparenten Farbwert für die Umrandung zu verwenden. Wie im folgenden Beispiel erkennbar ist, schimmert der blaue Hintergrund des <div> nach wie vor durch.

div {
 height:100px;
 width: 100px;
 background:#19667a;
 border:10px solid rgba(255,255,255,0.5);
}

Beispiel anschauen

background-clip: padding-box;

Um den Hintergrund hinter dem Rahmen zu entfernen, muss lediglich die folgende Zeile CSS-Code hinzugefügt werden:

background-clip: padding-box;

Anschließend wird die Hintergrundfarbe nur noch über die Content- und Padding-Box gerendert; mit dem Ergebnis, dass der Rahmen transparent angezeigt wird.

Beispiel anschauen

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing