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 Rahmenhidden
kein Rahmendotted
gepunktet Liniedashed
gestrichelte Liniesolid
durchgezogene Liniedouble
doppelt durchgezogene Linie (allerdings erst ab 3 Pixeln Rahmendicke)groove
3D-Effektridge
3D-Effektinset
3D-Effektoutset
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ünnmedium
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