Lädt...

CSS-Rahmen (Border)

Füllungen, Fotos, Verläufe und sanftes Ausblenden kennen Sie schon. Nächster Schritt: die Kante der Box zeichnen. Ein Rahmen (border) ist die Linie um ein Element — Karten, Buttons, Felder und Panels brauchen ihn ständig.

Was ist ein Rahmen?

Ein CSS-Rahmen sitzt am Rand der Elementbox. Er hat drei Zutaten: Breite (Dicke), Stil (Aussehen — durchgezogen, gestrichelt und Co.) und Farbe. Fehlt der Stil, sehen Sie oft trotz Breite keine brauchbare Linie.

Die drei Teile

Jeder Rahmen ist ein kurzes Rezept: Dicke + Look + Farbe.

Langform Breite, Stil, Farbe

css
CSS Code 
.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Warum der Stil zählt

border-width allein reicht nicht. Ohne border-style außer dem Startwert none erscheint meist keine Linie. Beginnen Sie mit solid, bevor Sie ausgefallenere Looks brauchen.

Kurzschreibweise: eine Zeile statt drei

Die Kurzform border packt Breite, Stil und Farbe zusammen. Übliche Alltagsreihenfolge: Breite → Stil → Farbe.

border-Kurzschreibweise

css
CSS Code 
.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}

Häufige Rahmenstile

Der Stil ist der Charakter der Linie. Merken Sie sich zuerst ein kleines Alltagset.

📊 Häufige border-style-Werte

Schlüsselwort Look Alltag
solid Durchgehende Linie Karten, Buttons, Formularfelder
dashed Kurze Striche Platzhalter, Drop-Zonen
dotted Punkte Sanfte Trenner, dezente Rahmen
double Zwei parallele Linien Dekorative Betonung (sparsam)
none Kein Rahmen Reset / Kante entfernen
hidden Wie none beim Zusammenfallen von Tabellenrahmen Tabellen später — Name kennen

Mehrere Stile nebeneinander

Gleiche Breite und Farbe; nur der Stil wechselt.

solid, dashed, dotted, double

css
CSS Code 
.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }

Eine Seite nach der anderen

Oben, rechts, unten und links lassen sich getrennt stylen — praktisch für Unterstreichungen, linke Akzentbalken oder asymmetrische Karten.

Rahmen pro Seite

css
CSS Code 
.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}

Kurzform pro Seite

border-left: 4px solid #0f766e ist der Alltagsweg für eine Kante, ohne die anderen anzufassen.

Alltags-Karten-Habit

Ein leichter Rahmen plus Innenabstand und sanfte Füllung wirkt klar, ohne zu schreien.

Einfache gerahmte Karte

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* Rundung ist die nächste Lektion — hier eckig lassen */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}

Rahmen entfernen

Zum Löschen bevorzugen Sie border: none (oder border-style: none). Nur border-color: transparent kann Breite/Platz lassen — none ist der saubere Reset.

Reset mit border none

css
CSS Code 
.plain {
border: none;
}

Selbst ausprobieren

  1. Karte mit Langform border-width, border-style: solid und türkiser border-color.
  2. Denselben Look mit border: 2px solid #0f766e schreiben.
  3. Vier Boxen: solid, dashed, dotted und double bei gleicher Dicke.
  4. Zitatblock nur mit dickem linken Rahmen.
  5. Von einem gerahmten Button starten, dann die Kante mit border: none entfernen.

Typische Fehler

  • Breite und Farbe setzen, aber border-style vergessen (nichts sichtbar)
  • border (gezeichnete Kante) mit margin (äußerer Abstand) verwechseln — andere Werkzeuge
  • Abgerundete Ecken nur von border erwarten — das ist border-radius (nächste Lektion)
  • Jede Seite laut anders einfärben „einfach so“
  • Dicken transparenten Rahmen lassen, obwohl border: none gemeint war

Kurzfassung

  • Ein Rahmen braucht Breite, Stil und Farbe
  • border: 2px solid #0f766e ist die Alltagskurzform
  • Lernen Sie zuerst solid, dashed, dotted, double und none
  • Seiten einzeln stylen, wenn das Design es verlangt
  • Sauber zurücksetzen mit border: none
  • Ecken vorerst eckig — Rundung kommt als Nächstes

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
9
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial