Fresh CSS constructs move web design beyond ticky-tacky little boxes

The World Wide Web’s decades-long tyranny of box design is finally coming to an end. A new set of CSS features – including the shape() function, and the border-shape and corner-shape properties –  offers web designers and their AI agents a broader palette for laying out content in a more fluid manner.

When the World Wide Web Consortium (W3C) published its first standard for web page layout in 1996, web sites emulated the grid-defined layouts of academic papers, newspapers, and magazines. 

At the time, graphics drivers, and browser rendering engines were all in a relatively primitive state. Developers were also trying to grapple with a new medium and generally found that flowing text within a defined space was much easier when the geometric coordinates of that space were kept as simple as possible.  

REG AD

But now print is basically dead, webdevs are savvier (and if not, AI is happy to help), and Lord knows GPUs are more powerful. So there's no reason today why a web page has to be square, daddy-o.  

REG AD

In Edwin A. Abbott's 1884 proto-Sci-Fi classic Flatland: A Romance of Many Dimensions, the protagonist who lives in flat two-dimensional space is abruptly exposed to the dizzying world of three dimensions, much to his astonishment.

Web developers may experience similar emotions when they first use these new CSS constructs. 

Dev’s choice: vertical or horizontal

In their original forms, HTML and CSS could draw only horizontal or vertical lines or borders on a Web page. Fancier layouts required proprietary plug-ins, such as Java Applets, Macromedia/Adobe Flash, or some tedious JavaScript hacks. 

SVG first broke the boxiness of the web, giving the developers the ability to put curves, squiggly lines, logos or any other wild-ass shape desired by using a series of numerical coordinates to describe the shape (it’s tedious work, though image-to-SVG converters help). SVG was limited to a canvas placed on a Web page, however. CSS ruled the layout of the page itself. 

The first attempt at bridging the two worlds was path(), which allowed SVG to be embedded directly within CSS. The path() function had some limitations – it wasn’t responsive to changing web page sizes and it didn’t understand variables or CSS units of measurement. Developers had to define all specs in pixels and that was that. 

Check out those curves

The shape() function properly introduced the Web to richer design. A shape() is a set of geometric coordinates of a desired shape or trajectory. Unlike path()’s reliance on SVG, it is built on responsive CSS syntax. When combined with the existing clip-path property, shape() has been used to create ticket stubs, chat bubbles, and other assorted page flotsam.  

REG AD

The latest CSS property, border-shape, completes the work by applying CSS-native coordinates defined in shape() to the web page borders themselves. Define the coordinates with shape(), embed it in a border-shape property, and the boundaries are staked out on the page itself. The boundaries are laid out early in the rendering process, rather than clipped in near the end of the rendering.

“In other words, putting borders on CSS shapes will become child’s play!” noted self-described CSS hacker Temani Afif, in a tutorial on the CSS-Tricks site. 

This new property opens a range of design possibilities heretofore too complicated to contemplate – at least within a 40-hour webdev workweek.

Afif offers a number of demonstrations in his tutorials: not only can you carve up a Web page any way you see fit, but you can also put borders within borders. Fill in the space between the outer shape and the inner shape to make a cut-out. Shape an open heart inside a square box, for instance, using nothing but CSS. 

Either the outside border or the internal shape can be animated, allowing the outside border to change shape as the mouse goes over it, or the inside border to be filled with an image or another design. A shape can enlarge or shrink when the mouse hovers over it, or text can be highlighted with little squiggly lines. 

If hand-crafting the contents of shape() is not your jam, a companion property called corner-shape offers a number of pre-defined fancy border patterns. Most are variations of the standard box, including boxes with rounded edges, beveled edges, notches, scoops, and one called a “squircle.”

According to the caniuse.com site, all major browsers now support shape(), while border-shape  and corner-shape are still being implemented and considered experimental (though the current releases of Chrome, Edge, and Opera support the standard).