CSS-Eigenschaft Border – Rahmen definieren

Rahmen: CSS Property boder

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 für:
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
2. border-style für:
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
3. border-color für:
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

CSS-Eigenschaft: border

Beschreibungmögliche WerteStandardwertKategorie
Rahmen (Border)border-width [px oder em]
<border-style>
<border-color>
Farben
Rahmen

Die »Angabe in oranger Schrift« ist die Standardanwendung dieser CSS-Eigenschaft.

Beachte:

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

  2. Möchte man die Eigenschaften des Rahmens für alle Seiten individuell festlegen, muss die Eigenschaft border-width, border-style oder border-color benutzt werden. Die Eigenschaft für eine einzelne Seite kann man mit der CSS Property entsprechend obiger Liste setzen, z.B. »border-top-color«.

    • Die Stärke des Rahmens wird mit dem Wert »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 dem Wert »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 dem Wert »border-color« definiert.
      Die Farbe kann man mit dem Farbnamen, als Hex-Code oder als RGB-Wert angeben. Farben werden standardmäßig mit dem Hex-Code definiert.

Beispiel CSS/* 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 */
.dashed {
/* gestrichelte Linie */
border-style: dashed;
}

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

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

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

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

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

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

.solid {
/* einfache Linie */
border-style: solid;
}

.none {
/* keine Linie */
border-style: none;
}Beispiel HTML<div "dashed">border-style: dashed</div>
<div "dotted">border-style: dotted</div>
<div "double">border-style: double</div>
<div "groove">border-style: groove</div>
<div "inset">border-style: inset</div>
<div "outset">border-style: outset</div>
<div "ridge">border-style: ridge</div>
<div "solid">border-style: solid</div>
<div "none">border-style: none</div>
Ausgabe des HTML-Codes
border-style: dashed
border-style: dotted
border-style: double
border-style: groove
border-style: inset
border-style: outset
border-style: ridge
border-style: solid
border-style: none

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.