CSS Grundlagen: Von langweilig zu fesselnd – Entdecke, wie Border deine Bilder zum Leben erweckt

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

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>
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