Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS-Rahmen: Nehme ich „outline“ oder „border“?

CSS-Rahmen: Nehme ich „outline“ oder „border“?

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 5. April 2012

Inhaltsverzeichnis

Dass man Elementen mit der CSS-Eigenschaft „border“ einen Rahmen verpassen kann, ist hinlänglich bekannt. Weiterhin existiert die Eigenschaft „outline“, die Elementen ebenfalls einen Rahmen verpasst. Beide Eigenschaften unterscheiden sich jedoch und können sogar kombiniert eingesetzt werden. Wir zeigen, wie das geht.

outline oder border CSS-Rahmen: Nehme ich „outline“ oder „border“?
Outline oder Border oder beides? Echtweltbeispiel fotografiert von Navin Rajagopalan

Border und Outline: Auf den ersten Blick identisch

Erst einmal scheinen sich beide Elemente nicht zu unterscheiden. Es lassen sich jeweils Stil, Farbe und Linienstärke des Rahmens festlegen:

border-style: solid:
border-width: 1px;
border-color: red;

outline-style: solid;
outline-width: 1px;
outline-color: red;

Auch die verschiedenen Stilarten („solid“ , „dotted“ etc.) sind bei beiden Eigenschaften identisch. Der Unterschied zwischen „border“ und „outline“ liegt im Detail.

Border und Outline: Der Abstand macht den Unterschied

Während die „border“-Eigenschaft umliegende Elemente um die Breite des Rahmens verschiebt, wird bei der „outline“-Eigenschaft der Rahmen um ein Element gelegt, ohne die Positon angrenzender Elemente zu verändern. Im Zweifel verdeckt der „outline“-Rahmen umliegende Elemente.

Umrahmt man beispielsweise ein Bild mit einem 10 Pixel breiten „border“-Rahmen, so verschiebt das Bild angrenzende Elemente um jeweils 20 Pixel nach rechts und unten. Der „outline“-Rahmen jedoch führt nicht zu einer Vergrößerung des Objektes. Entsprechend bleiben die Positionen benachbarter Elemente unverändert.

css border outline unterschied CSS-Rahmen: Nehme ich „outline“ oder „border“?
oben: Bild mit CSS-Eigenschaft „border“, unten: Bild mit CSS-Eigenschaft „outline“

Bezüglich der Rahmenführung gibt es einen weiteren Unterschied, der sich derzeit jedoch nur im Opera-Browser bemerkbar macht. Während die Eigenschaft „border“ immer einen rechteckigen Rahmen darstellt, passt sich der „outline“-Rahmen den Maßen der umschlossenen Elemente an. Wird beispielswiese ein Text, der aus unterschiedlichen Schriftgrößen besteht, mit einem „outline“-Rahmen versehen, passt sich der Rahmen jeweils den Schriftgrößen an.

css outline opera CSS-Rahmen: Nehme ich „outline“ oder „border“?
oben: „outline“ passt sich den Elementen an (nur in Opera), unten: „outline“ verhält sich wie „border“ (alle anderen Browser)

„border“ und „outline“ kombiniert

Die beiden Eigenschaften lassen sich auch kombinieren, wenn man ein Element mit zwei Rahmen versehen will. Beide Rahmen werden ohne Abstand zueinander dargestellt, wobei der „outline“-Rahmen logischerweise außen dargestellt wird. Auf diese Weise lassen sich – ohne Verschachtelung von Elementen – zwei Rahmen mit unterschiedlichem Stil sowie unterschiedlicher Farbe und Rahmenstärke realisieren.

css border outline kombiniert CSS-Rahmen: Nehme ich „outline“ oder „border“?
Die CSS-Eigenschaften outline und border miteinander kombiniert

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Aeosys Digitalagentur Logo Soest.

aeosys

Soest

pistis wordpress agentur logo

Philipp Pistis – WordPress Agentur

Zolling

4eck Media Webdesign Agentur Wahren an der Müritz.

4eck Media GmbH & Co. KG

Waren (Müritz)

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

Trendmarke Logo.

Trendmarke GmbH

Stuttgart

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten zu „CSS-Rahmen: Nehme ich „outline“ oder „border“?“
— was ist Deine Meinung?

  1. Markus sagt:
    5. März 2014 um 8:59 Uhr

    Kleiner Fehler in Zeile 1 des Quellcodes: Da muss am Schluss ein Semikolon rein. Bin grade fast verzweifelt, warum das früher ging und jetzt nicht mehr 😉

    Trotzdem danke für die Klarstellung der Unterschiede zwischen Border und Outline! 🙂

    Antworten
  2. Fritz Weisshart sagt:
    5. April 2012 um 12:56 Uhr

    Damit ist outline doch die Lösung der Wahl, wenn es darum geht, ein Element beim hovern zu kennzeichnen.

    Antworten
  3. Daniel Jahnsmüller sagt:
    5. April 2012 um 12:48 Uhr

    Wie sieht’s denn da mit der Browserkompatibilität aus? Kann der IE6+ das?

    Antworten
    1. Dieter Petereit sagt:
      5. April 2012 um 12:58 Uhr

      Border ja, Outline erst ab IE8

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑