Mit CSS Rahmen gestalten

Um den Rahmen von HTML-Elementen zu gestalten, besitzt CSS mehrere Eigenschaften, mit denen man das Aussehen des Rahmens bestimmen kann.
Im folgenden Tutorial werden die Verschiedenen Eigenschaften vorgestellt und mit Beispiel an den Inputboxen von HTML demonstriert.


Die Eigenschaft, um die sich alles dreht heißt border.

1) Im einfachsten Fall weisen wir dem Eingabefeld an jeder Seite den gleichen Rand zu:
Der Wert des Eigenschaft ist dann folgendermaßen aufgebaut:

border: <Stärke> <Rahmentyp> <Farbe>

Ein Beispiel wäre:

Code:
<input type="text" style="border: 1px solid #FF0000;" />

Unser Inputfeld hat nun einen 1 Pixel breiten, durchgezogen (solid) und roten (#FF0000) Rahmen.


2) Jede Rahmen-Seite bekommt verschiedene Eigenschaften:
Die in 1) vogestelle border-Eigenschaft muss nun vier mal verwendet werden.
Jedes mal mit einem Zusatz im Namen, der bestimmt, um welche Seite es sich handelt:

• border-top - Oberer Rahmen
• border-bottom - Unterer Rahmen
• border-left - Linker Rahmen
• border-right - Rechter Rahmen

Jede der vier Eigenschaften wird wie border benutzt.

Beispiel:

Code:
<input type="text" style="border-top: 1px solid #FF0000; border-bottom: 1px solid #00FF00; border-left: 1px silid #0000FF; border-right: 1px solid #FFFF00;" />

Bei deisem Input-Feld hat jede Seite eine andere Farbe.
Natürlich kann auch der Rahmentyp und die Stärke jeder Seite unterschiedlich sein.


Nun zum Rahmenstil:
Der Rahmenstil bestimmt, wie der Browser die Linien des Rahmens zeichnen soll.
Eine Möglichkeit haben wir schon kennen gelernt:
solid
Steht für eine durchgehende Linie.

Weitere Werte:

• dashed: Erzeugt eine gestrichelte Linie
• dotted: Erzeugt eine gepunktete Linie.
  (Der Internet Explorer zeigt diese wie dashed)

Ausserdem gibt es noch Werte, die einen 3D-Rahmen erzeugen, aber bei denen auf die Angabe der Farbe verzichtet werden muss:

• inset
• outset
• groove

Eine vollständige Liste aller Rahmen-Type findest du im Link am Ende.


Die Werte von border in einzelne Eigenschaften aufteilen
Neben der Möglichkeit, alle Werte des Rahmens (Stärke, Typ, Farbe) in einer einzigen Eigenschaft unterzubringen (border, border-left, usw..), kannst du diese auch auf einzelne Eigenschaften aufteilen, mit denen du die Werte, wie Stärke, Farbe, usw..) für jede Seite einzeln bestimmen kannst:

• border-width: Die Stärke
• border-style: Den Rahmentyp
• border-color: Die Rahmenfarbe

Auch hier kannst du für jede Seite eigene Werte definieren:

• border-left-style
• border-top-width
• border-right-color
• usw...

Abschließend noch zwei Beispiele:
Das erste demonstriert die Verwendung eines 3D-Rahmentypes, in dem Fall inset.
Der Button sieht nun "versenkt" aus:

Code:
<input type="text" style="border: 2px inset;" />

Zu beachten ist hier, dass - wie oben schon erwähnt - auf die Angabe einer Farbe verzichtet werden muss.

Das zweite Beispiel zeigt, wie man jedem Rahmen verschiedene Werte zuweist:
Der obere Rahmen ist gestrichelt und rot, der untere ist durchgezogen und blau.
Die anderen beiden sind Teil des 3D-Rahmens, aus Beispiel 1.

Code:
<input type="text" style="border: 2px inset; border-top: 1px dashed #FF0000; border-bottom: 1px solid #0000FF;" />

Man sieht hier ügrigens auch, wie man mit einzelnen Angaben (border-top, border-bottom) vorher definierte Eigenschaften überschreiben kann (in dem Fall die komplette border-Eigenschaft)



Zum Ende möchte ich noch auf das HTML/CSS/JavaScript Referenz-Werk SelfHTML hinweisen, das u.A. alle Eigenschaften und Werte rund um Rahmen in CSS bereitstellt:
CSS Referenz zu Rahmen in SelfHTML