CSS: Rahmen und Konturlinie
Auf dieser Seite werden alle CSS-Eigenschaften vorgestellt, durch die HTML-Elemente mit einem Rahmen ausgestattet werden können. Es können der Rahmenstil, die Rahmenstärke und -farbe für alle Seiten oder auch nur für eine bestimmte Seite des Elements festgelegt werden. Darüber hinaus ist es mit CSS3 möglich, die Ecken einer Rahmenlinie abzurunden. Zusätzlich zu Rahmen existieren Konturlinien mit leicht abweichenden Eigenschaften.
Rahmenstil – border-style
Über die Eigenschaft border-style lässt sich die Darstellung einer Rahmenlinie an den Seiten eines Elements festlegen. Mögliche Werte sind:
• none – keine Rahmenlinie
• solid – durchgehende Linie
• double – doppelte durchgehende Linie
• dashed – gestrichelte Linie
• dotted – gepunktete Linie
• groove – vertiefte Linie (›Tal‹)
• ridge – erhöhte Linie (›Hügel‹)
• inset – vertiefende Linie (›Abstieg‹)
• outset – erhöhende Linie (›Anstieg‹)
Die Farbwerte für inset und outset werden aber von WebKit und Gecko unterschiedlich bestimmt, weshalb es hier sinnvoll ist, die Farben für eine einheitliche Darstellung direkt zu definieren.
Ähnlich wie bei padding und margin kann der Rahmenstil mit border-style für die einzelnen Seiten eines Elements auf verschiedene Weise angegeben werden:
• ein Wert für alle Seiten
• zwei Werte: erster Wert für oben und unten; zweiter Wert für links und rechts
• drei Werte: erster Wert für oben; zweiter Wert für links und rechts; dritter Wert für unten
• vier Werte: im Uhrzeigersinn oben, rechts, unten, links
Ebenso ist es möglich, nur für eine bestimmte Seite den Rahmenstil anzugeben:
• border-top-style – oben
• border-bottom-style – unten
• border-left-style – links
• border-right-style – rechts
Hier ein paar Beispiele:
<p style='border-style:none;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border-style:solid;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border-style:double;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p style='border-style:dashed;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border-style:dotted;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border-style:groove;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p style='border-style:ridge;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border-style:inset;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border-style:outset;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Rahmenstärke – border-width
Über die Eigenschaft border-width lässt sich die Breite einer Rahmenlinie an den Seiten eines Elements festlegen. Mögliche Werte sind außer einem Zahlenwert beispielsweise in Pixeln (px):
• thin – dünn
• medium – mittel
• thick – dick
Wie diese Werte dargestellt werden, hängt vom Browser ab, daher sollte man für genaue Maße besser Zahlenwerte verwenden.
Ähnlich wie bei border-style kann die Rahmenstärke mit border-width für die einzelnen Seiten eines Elements auf verschiedene Weise angegeben werden:
• ein Wert für alle Seiten
• zwei Werte: erster Wert für oben und unten; zweiter Wert für links und rechts
• drei Werte: erster Wert für oben; zweiter Wert für links und rechts; dritter Wert für unten
• vier Werte: im Uhrzeigersinn oben, rechts, unten, links
Ebenso ist es möglich, nur für eine bestimmte Seite die Rahmenstärke anzugeben:
• border-top-width – oben
• border-bottom-width – unten
• border-left-width – links
• border-right-width – rechts
Man beachte, dass ein Rahmen nur dann angezeigt wird, wenn für die entsprechende(n) Seite(n) auch die Eigenschaft border-style definiert ist.
Hier ein paar Beispiele:
<p style='border-width:thick;border-style:solid;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border-width:1px;border-style:solid;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border-width:4px 1px 10px 0;border-style:solid;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p style='border-left-width:10px;border-left-style:solid;'>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Rahmenfarbe – border-color
Über die Eigenschaft border-color lässt sich die Farbe einer Rahmenlinie an den Seiten eines Elements festlegen. Wie Farbwerte notiert werden, siehe Farben.
Ähnlich wie bei border-style und border-width kann die Rahmenfarbe mit border-color für die einzelnen Seiten eines Elements auf verschiedene Weise angegeben werden:
• ein Wert für alle Seiten
• zwei Werte: erster Wert für oben und unten; zweiter Wert für links und rechts
• drei Werte: erster Wert für oben; zweiter Wert für links und rechts; dritter Wert für unten
• vier Werte: im Uhrzeigersinn oben, rechts, unten, links
Ebenso ist es möglich, nur für eine bestimmte Seite die Rahmenfarbe anzugeben:
• border-top-color – oben
• border-bottom-color – unten
• border-left-color – links
• border-right-color – rechts
Man beachte, dass ein Rahmen nur dann angezeigt wird, wenn für die entsprechende(n) Seite(n) auch die Eigenschaft border-style definiert ist.
Hier ein paar Beispiele:
<p style='border-color:orange;border-style:solid;'>Lorem ipsum dolor sit amet.</p>
<p style='border-color:#EE99FF;border-style:solid;'>Consetetur sadipscing elitr.</p>
<p style='border-color:rgb(238,153,255);border-style:solid;'>Sed diam nonumy eirmod tempor.</p>
<p style='border-color:rgb(80%,65%,27%);border-style:solid;'>Invidunt ut labore et dolore.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Invidunt ut labore et dolore.
Rahmen – border
Über die Eigenschaft border können folgende Eigenschaften in einer einzigen Definition eingestellt werden:
• border-style – Rahmenstil
• border-width – Rahmenstärke
• border-color – Rahmenfarbe
Es müssen nicht alle Angaben gemacht werden, und die Reihenfolge ist unerheblich. Die Definition kann auch für einzelne Seiten erfolgen:
• border-top – oben
• border-bottom – unten
• border-left – links
• border-right – rechts
Hier ein paar Beispiele:
<p style='border:orange outset 6px;'>Lorem ipsum dolor sit amet.</p>
<p style='border:dashed 2px #EE99FF;'>Consetetur sadipscing elitr.</p>
<p style='border-left:ridge 14px;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Rahmengrafik – border-image
Mit border-image kann der Rahmen eines Elements mit einer Grafik hinterlegt werden. Diese Eigenschaft wird von Opera erst ab Version 15 und vom Internet Explorer ab Version 11 unterstützt.
border-image-source
Der Pfad zur Grafikdatei.
border-image-width
Die Breite des Rahmens.
border-image-slice
Der verwendete Bildausschnitt.
border-image-outset
Versatz des Rahmens gegenüber der Inhaltsbox.
border-image-repeat
Horizontales und verikales Wiederholungsverhalten des Rahmens.
stretch repeat round space
border-image
Kombination der einzelnen Eigenschaften.
<!DOCTYPE html>
<html>
<head>
<title>border-image</title>
<meta charset='UTF-8'>
<style>
.container { background-color:red; padding:10px; }
.box {
background-color:magenta;
border:30px solid;
/* https://www.flickr.com/photos/filterforge/9663965220/ */
border-image-source:url(http://www.decocode.de/img/9663965220_58c5a8a97e_z.jpg);
border-image-width:30px;
border-image-slice:100;
border-image-outset:5px;
border-image-repeat:repeat repeat;
}
</style>
</head>
<body>
<div class='container'>
<div class='box'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
</body>
</html>
Dieser Code führt zu folgender Darstellung:
(Bildquelle: www.flickr.com)
Konturlinie – outline
Die Eigenschaft outline verhält sich nahezu wie die Eigenschaft border, mit dem wichtigsten Unterschied, dass eine Konturlinie (outline) außerhalb der Außenkante eines formatierten Block-Elements gezeichnet wird, während ein Rahmen (border) innerhalb der Außenkante des Block-Elements gezeichnet wird.
Ein weiterer Unterschied besteht darin, dass Inline-Elemente wie <span> bei einem Zeilenumbruch bei outline auch seitlich eine Konturlinie erhalten, während die Zeilen bei border seitlich offen bleiben (siehe Beispiel weiter unten).
Sämtliche Werte, die für border verwendet werden können, können auch für outline verwendet werden (Außnahme: outline-style:hidden ist nicht erlaubt).
Es können nur alle Seiten zusammen formatiert werden. Eigenschaften wie outline-left usw. existieren nicht. Allerdings können folgende Eigenschaften einzeln eingestellt werden:
• outline-style – Konturstil
• outline-width – Konturstärke
• outline-color – Konturfarbe
• outline-offset – Konturversatz nach außen
Die Eigenschaft outline wird vom MSIE erst ab Version 8 unterstützt.
Hier ein paar Beispiele:
<p style='outline:10px dashed green;'><samp>outline</samp> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='outline:10px dashed green;outline-offset:-5px;padding:20px;background-color:#333;margin-bottom:20px;'><samp>outline</samp> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='border:10px dashed blue;'><samp>border</samp> Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p>
<samp>outline</samp> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
<span style='outline:2px solid red;'>labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</span> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
<samp>border</samp> Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
<span style='border:2px solid yellow;'>labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</span> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
Dieser Code führt zu folgender Darstellung:
outline Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
outline Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
border Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
outline Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
border Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Runde Ecken – border-radius
CSS3 bietet eine Möglichkeit, viele Objekte, die normalerweise als Rechteck dargestellt werden, mit abgerundeten Ecken anzuzeigen. Dazu dient die Eigenschaft border-radius, die mittlerweile von allen gängigen Browsern unterstützt wird.
Diese Konstruktion funktioniert nicht:
Sowas allerdings schon:
Trennlinie formatieren
Das HTML-Tag <hr> für eine Trennlinie wird in den gängigen Browsern eigentlich nicht als Linie, sondern als leerer Rahmen mit width:100%; sowie height:0px; angezeigt, von dem man daher nur die Rahmenlinie sieht. Diese ist in der Voreinstellung in der Regel mit border-width:1px; und border-style:inset; definiert. Die Farbgebung kann unterschiedlich sein. Diese Eigenschaften lassen sich dementsprechend nutzen, um die Trennlinie individuell zu gestalten.
Beispiele:
<hr style='height:10px;border-width:5px;border-style:inset;'>
<hr style='width:80%;height:2px;margin:auto;border:5px solid green;background-color:purple;'>
<hr style='height:2px;border-width:0;background-color:white;'>
Die Umsetzung ist folgende: