CSS - Elemente - Rahmen

1. Ein Hinweis

Bei allen nun folgenden Angaben gelten dieselben Grundsätze wie bei den vorher beschriebenen Elementen margin und padding. Zu jeder Rahmeneigenschaft gibt es ebenfalls die vier Ränder -top, -right, -bottom und -left. Allerdings sieht die Syntax ein wenig anders aus.

div
{
  border-Rand-Rahmeneigenschaft: ...;
  /* also zum Beispiel */
  border-left-width: ...;
  border-top-style: ...;
  border-right-color: ...;
}

Will man also den Rahmen komplett einheitlich festlegen so reicht ein border-[Stil] völlig aus. Ansonsten muss man den jeweiligen Teilrahmen speziell angeben. Zum Teil auch inklusive des Stils. Bei den Tutorials werde ich darauf eingehen.

2. border-color

Definiert die Farbe des Rahmens. Erlaubt sind logischerweise Farbangaben sowie transparent. Dabei muss gleichzeitig ein Rahmentyp (border-style) festgelegt werden.

3. border-style

Hier kann man unterschiedliche Rahmenarten auswählen. Es gibt folgende Möglichkeiten:

• none kein Rahmen
• hidden kein Rahmen
• dotted gepunktet Linie
• dashed gestrichelte Linie
• solid durchgezogene Linie
• double doppelt durchgezogene Linie (allerdings erst ab 3 Pixeln Rahmendicke)
• groove 3D-Effekt
• ridge 3D-Effekt
• inset 3D-Effekt
• outset 3D-Effekt

Ein Tipp, lasst die Finger von groove bis outset. Die Darstellung schwankt je nach Browser und außerdem sieht es ziemlich sch***e aus. So à la 90er-Jahre Retro-Design.

4. border-width

Legt die Dicke des Rahmens fest. Dabei muss gleichzeitig ein Rahmentyp (border-style) angegeben werden. Erlaubt sind absolute numerische Angaben (also keine Prozente) sowie die folgenden Werte:

• thin dünn
• medium mittel (mittelstark nicht mittel gebraten)
• thick dick

5. Verkürzte Schreibweisen

Ähnlich wie beim margin und padding kann man sich auch bei border eine menge Tipparbeit sparen. Sollte man sich z.B. für einen Rahmen entscheiden, so reicht das folgende Beispiel völlig aus.

.rahmen
{
  border: 1px solid #000;
}

Das kann man auch gezielt für einzelne Ränder machen:

.rahmen
{
  border-left: 1px solid #000;
  border-top: 3px dotted #f00;
}

Möglich ist auch diese Kombination:

.rahmen
{
  border-width: 10px 5px 2px 7px;
  border-color: #f00;
  border-style: dashed;
}

6. Wichtig!

Solltet ihr einen Rahmen mit mehr als einem Pixel Dicke festlegen und jeweils unterschiedliche Farben definieren, so wundert euch nicht, wenn ihr "Treppeneffekte" bekommt.

div.rahmen
{
  border-width: 10px;
  border-style: solid;
  border-top-color: #ff0;
  border-right-color: #f00;
  border-bottom-color: #00f;
  border-left-color: #0f0;
}

Sollte etwas nicht so funktionieren, wie ihr wollt, so achtet genau auf eure Schreibweise. Ein border-left: #0f0; in obigem Beispiel macht alles kaputt, weil so wohl border-width als auch border-style durch diese Anweisung überschrieben werden. Also genau arbeiten!

7. Auch ganz wichtig!

Ein Rahmen besteht aus den vier Bereichen oben, unten, links und rechts. Siehe dazu folgende Illustration.

Und das kann zu Schwierigkeiten führen, wenn man nur bestimmte Bereiche des Rahmens ansteuern will. Denn sobald man zum Beispiel mit einem border-top und border-left mit unterschiedlichen Farben arbeitet, so sieht das Ergebnis oft nicht so aus wie gewünscht. Selbst wenn der Rahmen nur einen Pixel dick ist.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt