Border-boundary | CSS-Tricks

The border-boundary property in CSS set constraints to the bounds of an element that affects how the element’s borders behave. It’s defined in the CSS Round Display Level 1 specification, which is currently in Working Draft status. That means things can change between now and formal candidate recommendation.

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

The fact that this property lives in the CSS Round Display specification already tells you what it’s good at: creating circular interfaces. Even more specifically, border-boundary falls under the “Drawing borders around the display border” section which is yet another clue to what it does well: allowing an element’s borders to respect the round boundary of circular interfaces.

Imagine, if you will, a smart watch with a round screen. Let’s say that screen is 150px square. And in it is an orange box that’s the same dimensions.

Nothing, crazy, right? The orange box conforms to the rounded display because it’s overflowing the edges, which are hidden. But look what happens when a border is added to the box…

Hmm, not so great. Again, the edges of the box overflow the round display, so our border gets clipped in the process.

That’s where border-boundary fits into the picture. Adding it to the box with a value of display allows the box’s border to follow the round shape of the display. Since the property’s browser support is exactly zilch at the moment, allow me to offer a mocked up visual of the intended result.

See that? The border respects the display’s round shape, preventing it from getting clipped.

You can imagine how useful this might be when it comes to designing for watches with interfaces. The CSS Working Group has compiled a list of possible use cases where border-boundary could really come in handy.

Syntax

border-boundary: none | parent | display;

Initial value: none
Applies to: all elements
Inherited: yes
Percentages: n/a
Computed value: as specified
Animation type: discrete

Values

none: no boundary is set on the border.
parent: sets the boundary where the element’s area and the border edges of its parent meet.
display: sets the boundary where the element’s area and the border edges of the viewport meet.

Browser support

None at the time of writing.

Syntax

Values

Browser support

Further reading