Grenze-Grenze - CSS-Tricks | CSS-Almanach 2025

Die border-boundaryEigenschaft in CSS legt Einschränkungen für die Grenzen eines Elements fest, die sich auf das Verhalten der Elementgrenzen auswirken. Es ist in der CSS Round Display Level 1-Spezifikation definiert, die sich derzeit im Status "Working Draft" befindet. Das bedeutet, dass sich die Dinge zwischen jetzt und der formellen Empfehlung des Kandidaten ä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 enthalten ist, zeigt Ihnen bereits, wozu sie gut ist: Erstellen kreisförmiger Schnittstellen. Dies gilt insbesondere für border-boundaryden Abschnitt „Zeichnen von Rändern um den Anzeigerand“, der ein weiterer Hinweis darauf ist, was er gut macht: Ermöglichen, dass die Ränder eines Elements die runde Grenze kreisförmiger Schnittstellen berücksichtigen.

Stellen Sie sich, wenn Sie so wollen, eine intelligente Uhr mit rundem Bildschirm vor. Angenommen, der Bildschirm ist 150px groß. Und darin befindet sich eine orangefarbene Box mit den gleichen Abmessungen.

Nichts, verrückt, richtig? Das orangefarbene Feld entspricht der abgerundeten Anzeige, da die ausgeblendeten Kanten überlaufen. Aber schauen Sie, was passiert, wenn der Box ein Rahmen hinzugefügt wird ...

Hmm, nicht so toll. Auch hier laufen die Kanten der Box über die runde Anzeige, sodass unser Rand dabei abgeschnitten wird.

Das border-boundarypasst ins Bild. Wenn Sie es der Box mit dem Wert von displayhinzufügen, kann der Rand der Box der runden Form der Anzeige folgen. Da die Browserunterstützung der Eigenschaft im Moment genau gleich Null ist, kann ich ein nachgebildetes Bild des beabsichtigten Ergebnisses anbieten.

Siehst du das? Der Rand berücksichtigt die runde Form des Displays und verhindert, dass es abgeschnitten wird.

Sie können sich vorstellen, wie nützlich dies beim Entwerfen von Uhren mit Schnittstellen sein kann. Die CSS-Arbeitsgruppe hat eine Liste möglicher Anwendungsfälle zusammengestellt, die sich als nützlich border-boundaryerweisen könnten.

Syntax

border-boundary: none | parent | display;

Ursprünglicher Wert: none
Gilt für: alle Elemente
Geerbt: ja
Prozentsätze: n / a
Berechneter Wert: wie angegeben
Animationstyp: diskret

Werte

none: An der Grenze ist keine Grenze festgelegt.
parent: Legt die Grenze fest, an der sich der Bereich des Elements und die Randkanten des übergeordneten Elements treffen.
display: Legt die Grenze fest, an der sich der Bereich des Elements und die Randkanten des Ansichtsfensters treffen.