Lädt...

CSS Outline

Sie können bereits einen Border zeichnen. Outline ist ein verwandtes Werkzeug mit anderem Job: Es zeichnet einen Ring außerhalb der Border-Box und nimmt — anders als Border — keinen Layout-Platz. Nachbarn rücken nicht, wenn Sie eine Outline setzen.

Outline versus Border

Halten Sie diese beiden Werkzeuge in Ihrer mentalen Karte getrennt.

📊 Outline vs. Border

Merkmal Outline Border
Layout-Platz Nimmt keinen Platz; Boxgröße bleibt gleich Nimmt Platz; kann die Border-Box vergrößern
Typischer Ort Außerhalb der Border-Kante Um das Padding
Häufiger Einsatz Fokusringe, vorübergehende Betonung Dauerhafte UI-Kanten und Kartenrahmen
Teil der Boxmodell-Größenrechnung Nein Ja (mit Standard-content-box)

Eine einfache Outline

Stil, Breite und Farbe funktionieren ähnlich wie bei Border — der Ring sitzt aber außen.

Einfache Outline

css
CSS Code 
.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}

Outline-Kurzschreibweise

Das bekannte Trio: Breite, Stil und Farbe. Ein Stil ist nötig, damit die Outline sichtbar wird — outline: 2px #000 allein reicht nicht.

Outline-Kurzschreibweise

css
CSS Code 
.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}

Häufige Outline-Stile

Solid, dashed und dotted sind Alltagswahlen. outline: none entfernt den Ring — vorsichtig einsetzen (siehe Fokus unten).

Outline-Stilbeispiele

css
CSS Code 
.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }

outline-offset — den Ring nach außen schieben

outline-offset bewegt die Outline von der Border-Kante weg, ohne die Layout-Größe zu ändern. Positive Werte schieben nach außen; negative ziehen nach innen.

Outline mit Offset

css
CSS Code 
.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

Gleicher Look, andere Layout-Kosten

Zwei Boxen können ähnlich aussehen, aber nur Border ändert, wie viel Raum das Element belegt.

Border wächst; Outline nicht

css
CSS Code 
.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}

.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* Beide wirken kräftig; .with-border braucht mehr Layout-Breite */

Fokusfreundliche Gewohnheit

Browser nutzen oft Outline (oder einen ähnlichen Ring) für Tastaturfokus. Setzen Sie nicht überall outline: none. Wenn Sie Fokus neu stylen, liefern Sie einen klaren Ersatzring, damit TastaturNutzer sehen, wo sie sind.

Sichtbaren Fokusring behalten

css
CSS Code 
.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

Selbst ausprobieren

  1. Geben Sie einer gepolsterten Box einen border und eine dickere outline — Nachbarn bleiben.
  2. Wechseln Sie den Outline-Stil zwischen solid, dashed und dotted.
  3. Setzen Sie outline-offset: 8px und sehen Sie den Ring nach außen schweben.
  4. Vergleichen Sie .with-border und .with-outline nebeneinander — ähnliches Gewicht, andere Layout-Breite.
  5. Stylen Sie :focus-visible an einem Button statt Outlines global zu entfernen.

Häufige Fehler

  • Outline wie Border bei der Layout-Breite rechnen (Outline addiert keine Größe)
  • outline: none auf allen Elementen ohne Fokus-Ersatz
  • Erwarten, dass Outline Nachbarn wegdrückt (das ist Margin oder Borders Job)
  • Breite und Farbe ohne Stil (solid / dashed / …)
  • Outline mit den Boxmodell-Schichten verwechseln, die Sie gerade gelernt haben

Kurzfassung

  • Outline zeichnet außerhalb des Borders und nimmt keinen Layout-Platz
  • Kurzform: Breite, Stil, Farbe — Stil ist nötig
  • outline-offset verschiebt den Ring ohne Boxgröße zu ändern
  • Border für dauerhafte Kanten; Outline für Fokus und temporäre Ringe
  • Sichtbaren Fokusring (oder gleichwertigen Ersatz) für TastaturNutzer behalten

🧠 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

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