Zusammenfassende Eigenschaften
Bei den zusammenfassenden Eigenschaften sind üblicherweise eine, zwei, drei oder vier Angaben erlaubt.
Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es zwei Möglichkeiten. Die eine besteht darin, Einzelangaben wie
border-left-style
,
border-top-style
usw. zu notieren. Erlaubt sind aber auch Angaben wie
border-style:solid
double;
. Das sind unterschiedliche Angaben für die einzelnen Rahmenseiten.
Dabei gelten folgende Regeln:
• Eine Angabe: die Angabe bedeutet den Rahmentyp für alle Rahmenseiten.
• Zwei Angaben: die erste Angabe bedeutet den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für rechts und links.
• Drei Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts und links und die dritte den Rahmentyp für unten.
• Vier Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts, die dritte den Rahmentyp für unten und die vierte den Rahmentyp für links.
Bei Rahmendicke und Rahmenfarbe ist es ähnlich:
• Eine Angabe: Rahmendicke oder -farbe für alle Rahmenseiten.
• Zwei Angaben: die erste Angabe bedeutet die Rahmendicke oder -farbe für oben und unten, die zweite Angabe gilt für rechts und links.
• Drei Angaben: die erste Angabe bedeutet die Rahmendicke oder -farbe für oben, die zweite die für rechts und links und die dritte die für unten.
• Vier Angaben: die erste Angabe bedeutet die Rahmendicke oder -farbe für oben, die zweite die für rechts, die dritte die für unten und die vierte die für links.
Weitere Hinweise
Wenn Sie bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen Rahmen und Elementinhalt.
Einige der Effekte (z. B.
groove
) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von Schwarz unterscheidet.
Referenzinformationen
CSS-Eigenschaften
border
,
CSS-Eigenschaften
border-left
,
border-right
,
border-top
,
border-bottom
,
CSS-Eigenschaften
border-width
,
CSS-Eigenschaften
border-left-width
,
border-right-width
,
border-top-width
,
border-bottom-width
,
CSS-Eigenschaften
border-style
,
CSS-Eigenschaften
border-left-style
,
border-right-style
,
border-top-style
,
border-bottom-style
,
CSS-Eigenschaften
border-color
,
CSS-Eigenschaften
border-left-color
,
border-right-color
,
border-top-color
,
border-bottom-color
:
14.6.2 Abgerundete Ecken (border-radius)
Sie benötigen keinen expliziten Rahmen um ein Element, um dem Element abgerundete Ecken zuzuordnen. Es ist jedoch durchaus möglich, explizite Rahmen, so wie weiter oben beschrieben, mit runden Ecken zu kombinieren. Die
border-radius
-Eigenschaften werden erst offiziell mit CSS3 eingeführt, sind jedoch seit Jahren in der Praxis beliebt, um die für das Web 2.0, typischen soften Ecken zu erzwingen. Allerdings funktionieren sie im Internet Explorer erst ab Version 9.0. Für manche ältere Browser, beispielsweise Safari 4.0, sind noch proprietäre Präfixe notwendig.
Insgesamt stehen die zusammenfassende Eigenschaft
border-radius
sowie die Einzeleigenschaften
border-top-left-radius
(linke obere Ecke),
border-top-right-radius
(rechte obere Ecke),
border-bottom-left-radius
(linke untere Ecke) und
border-bottom-right-radius
(rechte untere Ecke) zur Verfügung.
Beispiel
Kostenlos Online Lesen 