Веб-дизајнот долго време се потпираше на правоаголни рамки, хоризонтални и вертикални линии и распореди што потсетуваат на печатени страници. Новите CSS можности, меѓу кои се функцијата shape() и својствата border-shape и corner-shape, треба да им овозможат на програмерите полесно да работат со позаоблени, неправилни и поизразени форми директно во распоредот на страницата.
Во раните денови на HTML и CSS, сложените линии и облици не беа дел од основниот арсенал на веб-развојот. За такви решенија често се користеа додатоци, Java аплети, Flash или JavaScript. SVG подоцна донесе криви, логоа и други форми, но главно како засебна графика сместена во рамките на веб-страницата, додека CSS остана задолжен за самиот распоред.
Претходниот чекор кон поврзување на овие две области беше функцијата path(), која дозволува SVG-патека во CSS. Нејзино ограничување е што не се приспособува добро на промени во големината на страницата и не работи со променливи и CSS единици. Параметрите мора да се дефинираат во пиксели.
Функцијата shape() пристапува поинаку. Таа користи CSS синтакса за опишување геометриски координати и може да се приспособува на различни димензии. Во комбинација со својството clip-path, веќе се користи за елементи како форми на билети и облачиња за разговор.
Со border-shape, истите CSS-опишани форми можат да се применат и на самите граници на елементите. Наместо формата да се отсекува во подоцнежна фаза од прикажувањето, нејзините граници се земаат предвид рано во процесот на исцртување на страницата. Тоа овозможува рамки во рамки, исечени отвори во облик на други фигури и анимирани надворешни или внатрешни контури.
Дополнително, corner-shape нуди однапред дефинирани стилови за аглите. Меѓу нив има заоблени, закосени, засечени и вдлабнати агли, како и таканаречениот „сквиркл“ облик.
Според Can I Use, shape() е поддржана во сите главни прелистувачи. Својствата border-shape и corner-shape сè уште се сметаат за експериментални, но нивниот стандард веќе го поддржуваат актуелните изданија на Chrome, Edge и Opera.