CSS INTENSIVSTATION

CSS Border & Border Styling

Ein Border ist der Rahmen um ein HTML-Element. Er kann um Boxen (wie div, p, img) gezogen werden und lässt sich mit CSS komplett anpassen: Farbe, Stil, Breite, Rundungen und mehr.

Border-Grundlagen

Die Kurzform border ist eine Abkürzung für:

border: border-width | border-style | border-color;
div { border: 2px solid black; }

Wenn du nur border schreibst, muss mindestens der Stil angegeben werden, sonst erscheint kein Rahmen.

Die 3 Border-Eigenschaften

1. border-width

border-width (Rahmenbreite) bestimmt die Dicke des Rahmens.

border-width: 1px;       /* 1 Pixel breit */
border-width: 0.5em;     /* halb so gross wie die Schriftgrösse */
border-width: thin;      /* vordefinierte dünne Breite */
border-width: medium;    /* Standardbreite */
border-width: thick;     /* dicker Rahmen */

2. border-style

border-style (Rahmenstil) der wichtigste Teil, sonst wird der Rahmen nicht angezeigt.

Border solid

border: 5px solid indigo;

Border dotted

border: 5px dotted indigo;

Border dashed

border: 5px dashed indigo;

Border double

border: 5px double indigo;

Border groove

border: 5px groove indigo;

Border ridge

border: 5px ridge indigo;

Border inset

border: 5px inset indigo;

Border outset

border: 5px outset indigo;

3. border-color

border-color (Rahmenfarbe) kann alle CSS-Farbwerte annehmen:

  • Schlüsselworte: red, blue, black, etc.
  • Hex: #ff0000
  • RGB: rgb(255,0,0)
  • RGBA (mit Transparenz): rgba(255,0,0,0.5)
  • HSL: hsl(0, 100%, 50%)

Border-Seiten separat ansprechen

Man kann die Ränder für jede Seite separat definieren:

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

Jede Eigenschaft kann wieder in die drei Bestandteile zerlegt werden:

border-top-width: 3px;
border-top-style: solid;
border-top-color: blue;

Kurzschreibweise

border-top: 3px dashed green;

Border-Radius – runde Ecken

Nurse Alle Border-Radius definitionen

Nützliche Border-Eigenschaften

  • border-collapse (für Tabellenrahmen)
  • outline – ähnlich wie border, aber wird nicht Teil des Boxmodells (ausserhalb des Rahmens, z.B. bei Fokus-Styling)

Beispiele

Unterschiedliche Seiten unterschiedlich gestalten

border-top: 3px solid red;
border-right: 5px dashed pink;
border-bottom: 2px dotted black;
border-left: 4px double purple;
border-color: black;
border-width: 1px 2px 3px 4px;
border-style: solid;

Verlauf

border: 4px solid transparent; /* Platzhalter-Rahmen */
  border-image-source: linear-gradient(to right, red, yellow);
  border-image-slice: 1;

Background Image

border: 10px solid transparent; /* Platzhalter-Rahmen */
  border-image-source: linear-gradient(to right, red, yellow);
  border-image-slice: 1;

w3schools