border zum rumprobieren

border ist ein wichtiger Bestandteil des Box-Modells, welcher Rahmen um Elemente zeichnet. Der Rahmen, der den Innen- vom Außenrand voneinander trennt, besitzt die Eigenschaften:

  • Breite (border-width)
  • Stil (border-style)
  • Farbe (border-color).

Auch hier lässt sich für jede dieser Eigenschaften mittels border-left, border-right, border-top und border-bottom für jede der vier Seiten ein eigener Wert angeben. Wird nur border angegeben, wird ein Rahmen mit gleicher Breite, Stil und Farbe auf allen vier Seiten des HTML-Elements festgelegt.

Die Breite der Umrandung wird mit der Eigenschaft border-width eingestellt. Diese kann die Werte thin (dünn), medium (mittel) und thick (dick) oder einen numerischen Wert in Pixeln annehmen. Um eine möglichst problemlose Darstellung in allen Browsern zu erreichen, sollten Pixelangaben verwendet werden.

Mit border-style kann der Stil des kompletten Rahmens definiert werden:

  • none = kein Rahmen
  • hidden = kein Rahmen (auch von Nachbarelementen)
  • dotted = gepunkteter Rahmen
  • dashed = gestrichelter Rahmen
  • solid = durchgehender Rahmen
  • double = doppelt durchgehender Rahmen
  • groove = Sieht aus, als wäre der Rahmen in die Zeichenfläche eingemeißelt (3-D-Effekt)
  • ridge = Sieht aus, als käme der Rahmen aus der Zeichenfläche hervor (3-D-Effekt)
  • inset = Rahmen bewirkt, dass die gesamte Box aussieht, als wäre sie in die Zeichenfläche eingebettet (3-D-Effekt)
  • outset = Rahmen bewirkt, dass die gesamte Box aussieht, als käme sie aus der Zeichenfläche heraus (3-D-Effekt)

Die 3-D-Effekte funktionieren übrigens nur richtig, wenn Sie eine Farbe angeben, die sich von Schwarz unterscheidet und eine gewisse Rahmendicke besitzt.

Ein nettes Werkzeug zum Veranschaulichen dieser Funktionen ist der CSS Box Border Test. Einfach die gewünschten Werte definieren und den Button “test styles” drücken. Das Ergebnis wird Ihnen nicht nur angezeigt, zusätzlich können Sie den entsprechenden CSS-Code direkt kopieren und in Ihre Website einbinden.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

,

Ebenfalls Lesenswert:

Bisher keine Kommentare.

Hinterlasse eine Antwort