http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Rahmen und runde Ecken

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

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.

Werte none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
Initialwert none
Vererbung nein
Anwendung global

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

Browserunterstützung

Die Eigenschaft border-style wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 6
IE 6 erkennt den Wert inherit nicht, an Tabellenelementen wird der Wert hidden ignoriert, und der Wert dotted wird wie dashed dargestellt, wenn die Rahmenbreite nur 1 Pixel ist.
Internet Explorer 7
IE 7 erkennt den Wert inherit nicht, und an Tabellenelementen wird der Wert hidden ignoriert. IE 7 kann gepunktete Linien mit 1 Pixel Breite darstellen, allerdings nur dann, wenn alle vier Rahmenseiten 1 Pixel breit sind. Sobald eine Seite breiter ist, wird aus dem gepunkteten Rahmen ein gestrichelter.
Internet Explorer 6 und 7
Im IE bis zur Version 7 erstrecht sich der Hintergrund von Elementen, die »Layout« haben (siehe den Abschnitt über hasLayout), nicht bis zur Außenkante der Borderbox, sondern nur bis zur Innenkante. Bei gepunkteten oder gestrichelten Linien scheint der Hintergrund daher nicht durch.
Konqueror
Konqueror macht im normalen Elementfluss einen nicht erlaubten Unterschied zwischen den Werten none und hidden, indem er hidden wie einen transparenten Rahmen darstellt.

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.

Werte medium, thin, thick, <Länge>, inherit
Initialwert medium
Vererbung nein
Anwendung global

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.

Browserunterstützung

Die Eigenschaft border-width wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 6 und 7
IE ignoriert bis Version 7 den Wert inherit, hinzu kommen die bereits weiter oben beschreibenen Probleme.

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.

Werte <Farbe>, transparent, inherit
Initialwert Der Initialwert der Eigenschaft border-color ist der Wert der Eigenschaft color dieses Elements.
Vererbung nein
Anwendung global

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.

Browserunterstützung

Die Eigenschaft border-color wird von allen modernen Browsern unterstützt mit folgender Einschränkung:

Internet Explorer 6 und 7
Der IE bis Version 7 ignoriert die Werte transparent und inherit.

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; }

Browserunterstützung

Alle Browser
Die Eigenschaft border wird von allen modernen Browsern unterstützt, auf Einschränkungen wird bei den Einzeleigenschaften hingewiesen.

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.

Werte <Länge>, <Prozent>
Initialwert 0
Vererbung nein
Anwendung global

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.

Tabelle 7.3.1: Die Eigenschaft border-radius fasst die Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius zusammen
Deklaration Radius der Ecke
oben links oben rechts unten rechts unten links
border-radius: 20px; 20 px 20 px 20 px 20 px
border-radius: 20px 40px; 20 px 40 px 20 px 40 px
border-radius: 20px 40px 60px; 20 px 40 px 60 px 40 px
border-radius: 20px 40px 60px 80px; 20 px 40 px 60 px 80 px

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)

Browserunterstützung

Die Eigenschaft border-radius wird nicht von allen Browsern unterstützt.

Internet Explorer
IE kennt die Eigenschaft border-radius bis zur Version 8 nicht. Erst der IE 9 wird runde Ecken beherrschen.
Mozilla
Mozilla-Browser können runde Ecken schon lange darstellen, allerdings nur mit Präfix: -moz-border-radius. Bitte beachten Sie darüber hinaus, dass sich die Schreibweise der Einzeleigenschaften von der Schreibweise der offiziellen Eigenschaften unterscheidet: -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright, -moz-border-radius-bottomleft.
Safari
Auch der KHTML-Browser beherrscht runde Ecken, allerdings ebenfalls nur mit Präfix: -webkit-border-radius. Die Namen der Einzeleigenschaften entsprechen ansonsten dem Standard: -webkit-border-top-left-radius, -webkit-border-top-right-radius, -webkit-border-bottom-right-radius, -webkit-border-bottom-left-radius. Die Unterstützung ist noch nicht vollständig implementiert, unter anderem gibt es noch Probleme bei der Kurzschreibweise.

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;
}