Border Radius, Border und Outline: Was eine Übertragung überlebt

Drei CSS-Eigenschaften formen die Kante einer Box: border-radius, border und outline. Im Inspektor eines Browsers stehen sie direkt nebeneinander, fast wie eine Familie. Nach einem Import in Figma verhalten sie sich plötzlich ganz unterschiedlich. Eine überlebt Ecke für Ecke, verliert dabei aber eine Kurve, die Figma zeichnen kann und CSS nicht. Die anderen beiden trennen sich entlang einer Linie, die CSS längst gezogen hat: zwischen dem, was als Rahmen zählt, und dem, was als Kontur zählt. Diese Linie entscheidet, ob ein Strich das Layout verschiebt oder einfach nur als Farbe darüberliegt.

Wer eine Seite ohne Quelldatei nachbaut, spart sich einen manuellen Durchgang, wenn klar ist, welche dieser drei Eigenschaften überlebt und in welcher Form. UnHTML liest das eigene CSS einer Seite aus, um diese Formen zu bauen, statt sie aus einem Screenshot zu erraten, und läuft dabei vollständig auf dem eigenen Rechner, ohne den Seiteninhalt hochzuladen. Deshalb beschreibt die folgende Übersicht genau, was zu erwarten ist: was border-radius auf dem Weg nach Figma behält und verliert, wie sich border und outline in zwei verschiedene Strich-Arten aufteilen, und was nach einem Import als Erstes zu prüfen ist.

border-radius: die vier Ecken und die Schrägstrich-Syntax

CSS border-radius ist eine Kurzform für vier Langform-Eigenschaften: border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius. Die Eigenschaft nimmt ein bis vier Werte, in dieser Reihenfolge angewendet. Ein Wert setzt alle vier Ecken. Zwei Werte setzen zuerst das Paar oben-links/unten-rechts, dann oben-rechts/unten-links. Drei Werte setzen oben-links, dann das Paar oben-rechts/unten-links, dann unten-rechts. Vier Werte setzen jede Ecke einzeln, beginnend oben-links im Uhrzeigersinn. MDN dokumentiert dieselbe Vier-Ecken-Erweiterung, die jedes Panel für berechnete Stile in einem Browser zeigen würde.

border-radius unterstützt zusätzlich eine Schrägstrich-Syntax für elliptische Ecken: Werte vor dem Schrägstrich setzen die horizontalen Radien, Werte danach die vertikalen. border-radius: 10px / 20px zeichnet jede Ecke als Ellipse von 10px Breite und 20px Höhe statt als 10px-Kreis. Prozentwerte beziehen sich auf die eigene Breite der Box auf der horizontalen Achse und die eigene Höhe auf der vertikalen Achse, weshalb ein hohes, schmales Element und ein niedriges, breites Element denselben Prozentwert nutzen und trotzdem sichtbar unterschiedliche Kurven erhalten können.

Importiert UnHTML eine Seite, wird der berechnete Radiuswert jeder Ecke direkt auf Figmas Felder für unabhängige Eckenradien übertragen, gemessen in den dichteunabhängigen Pixeln, die Figma intern verwendet. Hat das Quell-CSS vier unterschiedliche Eckenwerte gesetzt, werden alle vier einzeln übernommen, nicht gemittelt und nicht auf einen reduziert. Figmas eigene Dokumentation zum Eckenradius beschreibt dasselbe Panel für unabhängige Ecken, das sich über "Independent corners" in der rechten Seitenleiste öffnet.

Was nicht überlebt, ist die Eckenglättung. Figma nennt diesen Effekt "Squircle": eine durchgehende Kurve zwischen Quadrat und Kreis, bekannt aus dem iOS-Design, mit eigenem Schieberegler im Eckenradius-Panel und einer schnellen iOS-Voreinstellung, die die Glättung auf 60% setzt. CSS hat keine Eigenschaft, die diese Kurve beschreibt. border-radius beschreibt nur einen kreisförmigen oder elliptischen Bogen, deshalb landet jeder Import bei 0% Glättung, einem einfachen Bogen, selbst wenn die Live-Seite mit etwas gerendert wurde, das sich dem annähert. Den Squircle-Look gewünscht? Dann von Hand nach dem Import ergänzen. Das CSS hatte ihn nie, um ihn weiterzugeben.

Border gegen outline, und warum nur eines als Form überlebt

CSS hält border und outline konzeptionell getrennt, und diese Trennung zählt nach einem Import mehr als auf der Live-Seite. border ist Teil des Box-Modells: Es hat eine Breite, liegt innerhalb der äußeren Kante des Elements, und eine Änderung verändert, wie viel Platz das Element und seine Nachbarn einnehmen. outline liegt außerhalb des border und nimmt, wie MDN es klar formuliert, "keinen Platz ein, sodass es das Layout des Dokuments in keiner Weise beeinflusst." outline-offset kann den outline noch weiter nach außen schieben, und auch dieser Abstand bleibt für das Layout unsichtbar: Nichts anderes auf der Seite rückt zur Seite, um Platz zu schaffen.

Figmas aktuelles auto layout wurde gebaut, um genau diese Trennung zu spiegeln. Figmas eigene Anleitung zu auto layout und CSS Flexbox nennt die Zuordnung direkt: Ein innerer Strich verhält sich wie ein border und wird standardmäßig im Layout berücksichtigt, während ein zentrierter oder äußerer Strich sich wie ein outline verhält und vom Layout ausgeschlossen bleibt, selbst wenn die Einstellung "stroke included in layout" eines Frames aktiviert ist. Das ist eine bewusste Entscheidung, kein Versehen. Figma will, dass ein innerer Strich die Mindestgröße eines Frames verschieben kann, genau wie ein CSS-border es täte, und will, dass ein zentrierter oder äußerer Strich über dem Layout liegt, ohne das jemals zu dürfen.

Außerhalb eines auto layout Frames verengt sich der Unterschied wieder. Figmas Dokumentation zu Strich-Eigenschaften stellt fest, dass "die Stärke eines Strichs standardmäßig nicht in den Gesamtmaßen der Ebene enthalten ist", unabhängig davon, ob der Strich innen, zentriert oder außen ausgerichtet ist. Der in der Seitenleiste angezeigte Begrenzungsrahmen bleibt in jedem Fall gleich groß. Erst innerhalb eines auto layout Frames, und nur wenn "include stroke in layout" explizit aktiviert wird, beginnt die Strichstärke, zu den Maßen einer Ebene beizutragen.

In der Praxis bedeutet das: Ein CSS-border an einem importierten Element wird zu einem inneren Strich, der sich innerhalb von auto layout wie der ursprüngliche border verhält. Ein CSS-outline wird zu einem zentrierten oder äußeren Strich, der korrekt als Farbe erscheint, aber nie ein Nachbarelement verschiebt, wie es ein echter border täte. Die Form stimmt in beiden Fällen. Das Layout-Verhalten stimmt nur, wenn man wusste, aus welcher CSS-Eigenschaft es stammt.

Was der Import behält, und was er einebnet

Nebeneinander gestellt, teilen sich die drei Eigenschaften in behalten, umwandeln und einebnen auf:

• border-radius: bleibt exakt erhalten, Ecke für Ecke, einschließlich elliptischer Radien mit Schrägstrich-Syntax. Wird eins zu eins in Figmas Felder für unabhängige Eckenradien übertragen.
• Eckenglättung: bleibt nicht erhalten, weil CSS nichts zu übertragen hat. Jeder Import startet bei 0% Glättung und braucht den Squircle-Regler von Hand, wenn dieser Look gewünscht ist.
• border: bleibt als innerer Strich erhalten, im Layout berücksichtigt wie der ursprüngliche border.
• outline: bleibt als zentrierter oder äußerer Strich erhalten, sichtbar als Farbe, aber vom Layout ausgeschlossen, passend dazu, dass ein CSS-outline das Layout ohnehin nie beeinflusst hat.

Eine Sache, die man von Hand prüfen sollte, ist kein Fehler des Imports, sondern eine Entscheidung, die die Ursprungsseite bereits getroffen hat. Wurde auf einer Seite outline: none oder outline: 0 auf einem interaktiven Element gesetzt, überlebt diese Entfernung exakt so in der Figma-Datei, weil der Import dem CSS so treu bleibt, wie es geschrieben wurde. Das Erfolgskriterium 2.4.7 der WCAG 2.1, Focus Visible, verlangt einen sichtbaren Fokusindikator für alles Interaktive. Eine Seite, die ihren Standard-Fokus-outline bereits deaktiviert hat, trägt diese Lücke direkt in das eigene Redesign. Das ist eine Designentscheidung, die man überprüfen sollte, kein Fehler, den man melden muss.

Eine Zeitangabe, die man im Kopf behalten sollte: outline ist seit März 2023 Baseline, also breit verfügbar, und border-radius ist seit Juli 2015 Baseline. Jede halbwegs aktuelle Seite, die importiert wird, hat beide Eigenschaften irgendwo auf der Seite aktiv. Genau deshalb zählt die Zuordnung zwischen CSS und Figma-Strichen bei fast jedem Import, nicht nur in einem Randfall.

Häufig gestellte Fragen

Im FAQ-Block zu diesem Artikel stehen Antworten dazu, wie exakt der Radius übertragen wird, warum ein outline zu einer eigenen Form wird, und ob ein fehlender Fokus-outline mit übertragen wird.

border-radius überlebt einen Import Ecke für Ecke, einschließlich elliptischer Radien, verliert dabei aber Figmas Eckenglättungskurve, weil CSS keine Eigenschaft dafür hat, die sie beschreibt. border und outline überleben ebenfalls, nur als zwei unterschiedliche Strich-Ausrichtungen mit zwei unterschiedlichen Layout-Verhalten: ein innerer Strich, der zur Größe eines Frames zählt, und ein zentrierter oder äußerer Strich, der dieselbe Linie zeichnet, ohne jemals etwas anderes auf der Fläche zu verschieben. Nach jedem Import lohnt es sich, genau diese beiden Punkte zuerst zu prüfen: Ist die richtige Strich-Ausrichtung am richtigen Element gelandet, und braucht eine Ecke ihre Glättung wieder von Hand?