border-boundary

Die border-boundary-Eigenschaft in CSS legt Beschränkungen für die Grenzen eines Elements fest, die beeinflussen, wie sich die Ränder des Elements verhalten. Sie ist in der CSS Round Display Level 1-Spezifikation definiert, die sich derzeit im Working Draft-Status befindet. Das bedeutet, dass sich Dinge zwischen jetzt und der formalen Candidate Recommendation ändern können.

.element {
  border-boundary: display; /* sets the boundary to the screen display */
}

Die Tatsache, dass diese Eigenschaft in der CSS Round Display-Spezifikation lebt, verrät Ihnen bereits, wofür sie gut ist: das Erstellen von kreisförmigen Oberflächen. Noch spezifischer fällt border-boundary unter den Abschnitt „Drawing borders around the display border“, was ein weiterer Hinweis darauf ist, was sie gut kann: die Ränder eines Elements die runde Grenze kreisförmiger Oberflächen respektieren zu lassen.

Stellen Sie sich, wenn Sie wollen, eine Smartwatch mit einem runden Bildschirm vor. Nehmen wir an, dieser Bildschirm ist 150 Pixel quadratisch. Und darin befindet sich eine orangefarbene Box mit denselben Abmessungen.

Nichts Besonderes, verrückt, oder? Die orangefarbene Box passt sich der abgerundeten Anzeige an, da sie die Kanten überlappt, die verborgen sind. Aber schauen Sie, was passiert, wenn der Box ein Rand hinzugefügt wird...

Hmm, nicht so toll. Wieder überlappen die Kanten der Box die runde Anzeige, sodass unser Rand dabei abgeschnitten wird.

Hier kommt border-boundary ins Spiel. Wenn sie der Box mit dem Wert display hinzugefügt wird, kann der Rand der Box der runden Form der Anzeige folgen. Da die Browserunterstützung für die Eigenschaft derzeit exakt null ist, erlaube ich mir, eine visuelle Darstellung des beabsichtigten Ergebnisses anzubieten.

Sie können sich vorstellen, wie nützlich dies bei der Gestaltung für Uhren mit Schnittstellen sein könnte. Die CSS Working Group hat eine Liste möglicher Anwendungsfälle zusammengestellt, in denen border-boundary wirklich nützlich sein könnte.

Syntax

border-boundary: none | parent | display;

• Initialwert: none
• Gilt für: alle Elemente
• Vererbt: ja
• Prozentwerte: n/v
• Berechneter Wert: wie angegeben
• Animationstyp: diskret

Werte

• none: Es wird keine Grenze am Rand gesetzt.
• parent: Setzt die Grenze, an der sich die Fläche des Elements und die Randkanten seines übergeordneten Elements treffen.
• display: Setzt die Grenze, an der sich die Fläche des Elements und die Randkanten des Viewports treffen.

Browser-Unterstützung

Keine zum Zeitpunkt des Schreibens.

Weitere Lektüre

• CSS Round Display Level 1 specification (Working Draft)
• Round Display Examples (CSS Working Group Wiki)
• CSS Round Display specifications (01.org)