<!--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>
/*Элемент без анимации, либо со стандартной анимацией*/
.up-shape{    /*Название класса*/
	--squircle-radius: 100px 100px 0px 0px; /*Радиус скругления углов*/
	--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-->