New CSS features push web design beyond the rectangle

The web's 30-year reliance on rectangular layout is starting to crumble. Three comparatively new CSS features, the shape() function and the border-shape and corner-shape properties, give designers a broader palette for pages that are no longer built from stacked boxes.

From SVG to shape()

When the World Wide Web Consortium published its first layout standard in 1996, pages echoed the grid-driven design of newspapers and journals. Browser engines were young, graphics hardware primitive, and flowing text inside a rectangle was the safe choice.

SVG was the first real break from boxiness: numerical coordinates let developers draw curves, squiggly lines and arbitrary shapes, but it remained confined to a canvas placed on the page while CSS ruled the layout. The path() function bridged the two by embedding SVG directly in CSS, but it was not responsive to changing page sizes and did not understand variables or CSS units: every coordinate had to be defined in pixels.

What shape() and border-shape change

shape() is a set of geometric coordinates describing a desired shape or trajectory, built on responsive CSS syntax rather than SVG. Combined with the existing clip-path property, it has been used to create ticket stubs, chat bubbles and other non-rectangular page elements.

The border-shape property applies CSS-native coordinates defined in shape() to a page's borders. Define the coordinates once, and the boundaries are staked out on the page during the early rendering stage rather than clipped near the end. "Putting borders on CSS shapes will become child's play," wrote CSS developer Temani Afif, a self-described CSS hacker, in a tutorial published on CSS-Tricks.

Afif's demonstrations go beyond a single outline: designers can carve a page into any form, place borders inside borders and fill the space between an outer and an inner shape to make cut-outs, such as an open heart inside a square box using nothing but CSS.

corner-shape and browser support

For developers who would rather not hand-craft coordinates, the companion corner-shape property offers pre-defined patterns, most of them variations of the standard box: rounded edges, beveled edges, notches, scoops and a shape known as a "squircle."

According to caniuse.com, all major browsers now support shape(). border-shape and corner-shape are still being implemented and are considered experimental, although the current releases of Chrome, Edge and Opera support the standard. The remaining work, the report concludes, is up to developers.