For roughly three decades, web layout has been stuck in rectangles, a constraint born from early CSS and primitive rendering engines. A new set of CSS features aims to break that mold by letting developers define page borders and shapes with native CSS coordinates, rather than relying on plugins or JavaScript workarounds.
The shape() function builds on the older SVG-based path() but is responsive and understands CSS units and variables. Combined with clip-path, it has already been used for ticket stubs and chat bubbles. The newer border-shape property takes those coordinates and applies them to the page's own borders, and because it is processed early in the rendering pipeline, it supports nested borders, cut-outs, and animated shapes.
A companion property, corner-shape, offers preset patterns such as rounded, beveled, notched, and squircle corners. According to the source, all major browsers now support shape(), while border-shape and corner-shape are still considered experimental—though current releases of Chrome, Edge, and Opera support the standard.