<!--https://dsgnmax.ru/squircle-->
<script src="https://unpkg.com/css-paint-polyfill@3.4.0/dist/css-paint-polyfill.js"></script>
<script>
(async function () {
if (!("paintWorklet" in CSS)) {
await import("css-paint-polyfill");
}
CSS.paintWorklet.addModule(
`https://www.unpkg.com/css-houdini-squircle/squircle.min.js`
);
})();
</script>
<style>
/*Элемент без анимации, либо со стандартной анимацией*/
.squircle24{ /*Название класса*/
--squircle-radius: 24px; /*Радиус скругления углов*/
--squircle-smooth: 1; /*Плавность скруглений, где 0 - это скошеные углы*/
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
/*Элемент с SBS-анимацией*/
.squirclesbs24 div{ /*Название класса*/
--squircle-radius: 24px; /*Радиус скругления углов*/
--squircle-smooth: 1; /*Плавность скруглений, где 0 - это скошеные углы*/
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
/*Скругление полей ввода в форме зеро-блока*/
.squircleform24 .t-input-block{
--squircle-radius: 24px;
--squircle-smooth: 1;
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
/*Скругление кнопки форме зеро-блока*/
.squircleform24 .tn-form__submit button{
--squircle-radius: 24px;
--squircle-smooth: 1;
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
</style>
<!--https://dsgnmax.ru/squircle-->