Rahmenstil: Die zusammenfassende Eigenschaft border-style

Die zusammenfassende Eigenschaft border-style gibt die Art der gezeichneten Linie des Rahmens an. Die Eigenschaften border-top-style, border-right-style, border-bottom-style und border-left-style setzen die Linienart entsprechend nur für eine Seite der Borderbox.

Die einzelnen Werte haben jeweils folgende Bedeutung:

• none und hidden: Diese Werte geben explizit an, dass kein Rahmen dargestellt werden soll. none ist der Initialwert.
• dotted: Gepunkteter Rahmen.
• dashed: Gestrichelter Rahmen.
• solid: Durchgezogener Rahmen.
• double: Doppelter durchgezogener Rahmen.
• groove: Der Rahmen sieht aus wie in die Oberfläche geritzt.
• ridge: Der Rahmen sieht aus, als würde er auf der Oberfläche aufliegen.
• inset: Der Rahmen lässt das Element so aussehen, als liege es tiefer in der Oberfläche.
• outset: Der Rahmen lässt das Element so aussehen, als hebe es sich ein wenig aus der Oberfläche heraus.

Werden für border-style mehrere durch Leerraum getrennte Werte angegeben, gelten die gleichen Regeln wie für die Eigenschaft padding. Folgende Regeln sind äquivalent und setzen den Linienstil eines Elements E auf solid oben, rechts und links und dashed unten:

E {
  border-style: solid;
  border-bottom-style: dashed;
}
E { border-style: solid solid dashed solid; }

Abb. 7.13: Die Eigenschaft border-style

Zum Seitenanfang

Rahmenbreite: Die Eigenschaft border-width

Die zusammenfassende Eigenschaft border-width gibt die Breite der Borderbox an. Die Eigenschaften border-top-width, border-right-width, border-bottom-width und border-left-width setzen die Breite entsprechend nur für eine Seite der Borderbox.

Der Wert medium zeichnet einen Rahmen mittlerer Dicke, thin zeichnet einen dünnen Rahmen, thick einen dicken Rahmen. Die Interpretation der Werte thin, medium und thick ist browserabhängig.

Auch für border-width können bis zu vier Werte angegeben werden, die analog zur Eigenschaft border-style für die entsprechenden Seiten der Borderbox gelten.

Zum Seitenanfang

Rahmenfarbe: Die zusammenfassende Eigenschaft border-color

Die zusammenfassende Eigenschaft border-color gibt die Farbe der Borderbox an. Die Eigenschaften border-top-color, border-right-color, border-bottom-color und border-left-color setzen die Farbe entsprechend nur für eine Seite der Borderbox.

Wenn Sie den Wert transparent angeben, ist der Rahmen durchsichtig, das heißt, darunterliegende Elemente scheinen durch.

Auch für border-color können Sie bis zu vier Werte angeben, die analog zur Eigenschaft border-style für die entsprechenden Seiten der Borderbox gelten.

Zum Seitenanfang

Rahmen: Die zusammenfassende Eigenschaft border

Die zusammenfassende Eigenschaft border fasst die Eigenschaften border-style, border-width und border-color zusammen. Die Eigenschaften border-top, border-right, border-bottom und border-left geben Rahmenstil, -breite und -farbe entsprechend nur für eine Seite der Borderbox an. Weggelassene Werte werden auf ihre Initialwerte gesetzt.

Sie können die Werte durch Leerzeichen getrennt in beliebiger Reihenfolge einfach hintereinanderschreiben. Folgende Regeln führen immer zum gleichen Ergebnis:

h1 {
  border-width: 2px;
  border-style: solid;
  border-color: #309;
}

h1 {
  border-top: 2px solid #309;
  border-right: 2px solid #309;
  border-bottom: 2px solid #309;
  border-left: 2px solid #309;
}

h1 { border: 2px solid #309; }

h1 { border: solid #309 2px; }

Zum Seitenanfang

Runde Ecken: Die zusammenfassende Eigenschaft border-radius

Die zusammenfassende Eigenschaft border-radius beschreibt die Rundung der Ecken der Borderbox eines Elements in Form einer Ellipse. Die Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius beschreiben die Rundung entsprechend nur für eine Ecke der Borderbox.

Die Eigenschaft border-radius ist nicht Bestandteil von CSS bis Version 2.1, sondern Teil der noch nicht verabschiedeten W3C-Empfehlung CSS Backgrounds and Borders Module Level 3, die mit hoher Wahrscheinlichkeit Teil des CSS 3-Standards werden wird. border-radius gehört zu den neuen CSS-Eigenschaften, die bereits von zahlreichen Browsern unterstützt werden und daher schon verwendet werden können.

Sie können die Eigenschaft border-radius unabhängig von der Eigenschaft border einsetzen, das heißt sie können die Ecken eines Elements abrunden ohne gleichzeitig einen Rahmen zeichnen zu müssen.

Vereinfacht gesagt handelt es sich bei einer Ellipse um einen gestreckten oder gestauchten Kreis, daher verfügt sie über zwei Radien, einen horizontalen und einen vertikalen. Den Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius können Sie daher zwei Werte zuweisen: Der erste Wert definiert die Länge des horizontalen Radius, der zweite Wert den vertikalen. Die Regel

div.abgerundet {
  border-top-left-radius: 55pt 25pt;
  border-top-right-radius: 55pt 25pt;
  border-bottom-right-radius: 55pt 25pt;
  border-bottom-left-radius: 55pt 25pt;
}

ergibt eine Rahmenform wie in Abbildung 7.13.1 zusehen.

Abb. 7.13.1: Die Eigenschaft border-radius

Sie können sich sicherlich denken, dass die vier Deklaration sich über die zusammenfassende Eigenschaft border-radius zusammenfassen lassen, allerdings ein wenig anderes als Sie es vielleicht intuitiv machen würden. Schauen wir uns zunächst an, was folgende Deklaration bewirkt, siehe Abbildung 7.13.2.

div.abgerundet { border-radius: 55px 25px; }

Abb. 7.13.2: Kurzschreibweise von border-radius

Alle Ecken sind kreisförmig abgerundet, die Ecken oben links und unten rechts um 55 px, die beiden anderen Ecken um 25 px. Wie kommt das? Das liegt an der Kurzschreibweise der Eigenschaft border-radius, die ähnlich funktioniert wie bei der Eigenschaft padding.

Kurzschreibweise

Sie können bis zu vier Werte angeben. Tabelle 7.3.1 zeigt, auf welche Ecken die Werte sich jeweils beziehen.

Folgende Regeln sind äquivalent:

div.abgerundet { border-radius: 30px 30px 60px; }

div.abgerundet {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 30px;
}

Sie wissen nun, wie Sie die zusammenfassende Eigenschaft border-radius für kreisförmige Ecken einsetzen, aber wie müssen Sie die Werte notieren, wenn Sie elliptische Ecken haben möchten?

In diesem Fall geben Sie zunächst die horizontalen Radien für alle vier Ecken an und anschließend, getrennt durch einen Slash (/), die vertikalen Radien. Die Regel

div.abgerundet {
  border-top-left-radius: 55pt 25pt;
  border-top-right-radius: 55pt 25pt;
  border-bottom-right-radius: 55pt 25pt;
  border-bottom-left-radius: 55pt 25pt;
}

können Sie wie folgt abkürzen:

div.abgerundet { border-radius: 55px / 25px; }

Die folgenden Regeln führen alle zu demselben Ergebnis. In der ersten Regel sind die Einzeleigenschaften aufgeführt, die in der zweiten Regel zusammengefasst werden. Die dritte Regel macht Gebrauch von der Kurzschreibweise. Dieses Beispiel wendet border-radius auf gestrichelte Rahmen an, aber es sind auch alle anderen Rahmenstile möglich.

div.abgerundet {
  border: 10px dashed black;
  border-top-left-radius: 4em 1.5em;
  border-top-right-radius: 2.5em 6em;
  border-bottom-right-radius: 6em 1.5em;
  border-bottom-left-radius: 2.5em 6em;
}

div.abgerundet {
  border: 10px dashed black;
  border-radius: 4em 2.5em 6em 2.5em / 1.5em 6em 1.5em 6em;
}

div.abgerundet {
  border: 10px dashed black;
  border-radius: 4em 2.5em 6em / 1.5em 6em;
}

Abb. 7.13.3: boder-radius ermöglicht auch ungewöhnliche Rahmen (Darstellung im Opera 10)

Damit Sie alle Browser bedienen, die derzeit runde Ecken darstellen können, denken Sie daran, alle Schreibweisen zu berücksichtigen. Um beispielsweise browserübergreifend die obere rechte Ecke eines Elements abzurunden, müssen Sie drei Deklarationen notieren:

div.abgerundet {
  -webkit-border-top-right-radius: 50px;
  -moz-border-radius-topright: 50px;
  border-top-right-radius: 50px;
}