A new set of CSS features makes it possible to design web pages beyond the box format. The shape() function and the border-shape and corner-shape properties give designers and developers curved outlines, cutouts and free-form borders, with no plug-in or JavaScript.
Shape() describes a shape using geometric coordinates. Unlike the older path(), which relied on SVG and only accepted pixels, it uses CSS syntax and adapts to the size of the page. Combined with the clip-path property, it is already used to draw ticket stubs and chat bubbles. border-shape brings those coordinates to the element's own border. The outline is defined at the start of rendering, rather than being clipped at the end.
"In other words, putting borders on CSS shapes is going to become child's play," wrote Temani Afif, who describes himself as a CSS hacker, in a tutorial on the CSS-Tricks website (loosely translated).
In his examples, you can put borders inside borders, cut a heart out of a square and animate the outline when the mouse hovers over it. For those who don't want to write coordinates, corner-shape offers ready-made corners: rounded, beveled, notched and the "squircle," part square, part circle.
According to the caniuse.com website, all major browsers already support shape(). border-shape and corner-shape are still experimental, but the current versions of Chrome, Edge and Opera already support them. When the W3C published the first web layout standard, in 1996, pages copied the grid of newspapers and magazines. HTML and CSS only drew horizontal and vertical lines; free-form shapes required Flash, Java applets or SVG confined to an area of the page.
With information from theregister.com.
Sources
Text written with AI from the sources listed and checked by the newsroom's automated rules. How we work
Want to see resumer first in Google searches?
Add to Google's preferred sources
