Hauptmenü

Untermenü

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:

Rahmenarten

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:

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
{
  border1px solid #000;
}

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


.rahmen
{
  border-left1px solid #000;
  border-top3px dotted #f00;
}

Möglich ist auch diese Kombination:


.rahmen
{
  border-width10px 5px 2px 7px;
  border-color#f00;
  border-styledashed;
}

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-width10px;
  border-stylesolid;
  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.

Rahmenaufbau

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