CSS Grundlagen: Grenzenlose Kreativität – Tipps und Tricks für die Verwendung von Border

Kfz Versicherungsvergleich- Mehr als 330 Tarife im Vergleich
English

Rahmen für HTML-Elemente verwenden: CSS Eigenschaft Border

Die CSS-Eigenschaft border ist die Kurzschreibweise für die Eigenschaften

Jede dieser drei CSS Eigenschaften ist wieder eine Kurzschreibweise. Und zwar:

1. border-width

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

2. border-style

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

3. border-color

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

CSS-Eigenschaft: Border
Beschreibung mögliche Werte Standardwert Kategorie
Rahmen (Border) Border-Width in px oder em
Border-Style
Border-Color
Farben
Rahmen

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft border

  1. Mit border können die Rahmen-Eigenschaften nur für alle vier Seiten gleichzeitig definiert werden.

  2. Möchte man die Rahmen Eigenschaften für jede Seite separat festlegen, müssen die Eigenschaften border-width, border-style oder border-color verwendet werden. Die Eigenschaft für eine einzelne Seite kann man mit der CSS Property entsprechend obiger Liste setzen, z.B. border-top-color für oben.

    • Die Stärke des Rahmens wird mit der Eigenschaft border-width definiert.
      Die Stärke wird in px, em oder mit den Keywords thin, medium oder thick angegeben. Die Stärke medium ist die Standardstärke.

    • Das Aussehen des Rahmens wird mit der Eigenschaft border-style definiert.

      dashed

      gestrichelte Linie

      dotted

      gepunktete Linie

      double

      doppelte durchgehende Linie

      groove

      3D-Rahmen mit Pyramiden-Effekt

      inset

      3D-Rahmen mit Hervorhebung, ähnlich wie bei einem Button

      outset

      Gegenteil von inset, Rahmen mit 3D-Hervorhebung, ähnlich wie bei einem gedrückten Button

      ridge

      3D-Rahmen, der wie ein Hügel aussieht

      solid

      Standard-Rahmen, einfache durchgezogene Linie

      none

      kein Rahmen

      hidden

      nicht sichtbarer Rahmen

    • Die Farbe des Rahmens wird mit der Eigenschaft border-color definiert.
      Die Farbe kann man mit Farbnamen, als Hex-Code oder als RGB-Wert angeben. Farben werden standardmäßig mit dem Hex-Code definiert.

Klassen für Rahmen mit border definieren

/* Bereich definieren */
div {
  /* Außenabstand */
  margin: 1.563em;

  /* Innenabstand */
  padding: 0.625em;

  /* Breite */
  width: 80%;

  /* Höhe */
  height: 4em;

  /* Hintergrund */
  background: #cccccc;
}


/* Klassen für Border definieren */
.solid {
  /* einfache Linie */
  border-style: solid;
}

.ridge {
  /* Linie anheben */
  border-style: ridge;
}

.outset {
  /* Linie eindrücken */
  border-style: outset;
}

.inset {
  /* Linie anheben */
  border-style: inset;
}

.groove {
  /* 3D Pyramiden-Effekt */
  border-style: groove;
}

.double {
  /* doppelte Linie */
  border-style: double;
}

.dotted {
  /* gepunktete Linie */
  border-style: dotted;
}

.dashed {
  /* gestrichelte Linie */
  border-style: dashed;
}

.none {
  /* keine Linie */
  border-style: none;
}

Demo für unterschiedliche Arten von Rahmen mit Border

<div class="solid">border-style: solid</div>
<div class="ridge">border-style: ridge</div>
<div class="outset">border-style: outset</div>
<div class="inset">border-style: inset</div>
<div class="groove">border-style: groove</div>
<div class="double">border-style: double</div>
<div class="dotted">border-style: dotted</div>
<div class="dashed">border-style: dashed</div>
<div class="none">border-style: none</div>

unterschiedliche Rahmentypen für HTML-Elemente mit Border

border-style: solid
border-style: ridge
border-style: outset
border-style: inset
border-style: groove
border-style: double
border-style: dotted
border-style: dashed
border-style: none