<!--Houdini border
https://mt-webdesign.ru/houdini-border-->
<style>
/*Настройки углов*/
:root {
--BorderHoudini: 40px; /*Браузер поддерживает*/
--BorderOther: 40px; /*Браузер не поддерживает*/
--BorderHoudiniMob: 40px; /*Браузер поддерживает мобила*/
--BorderOtherMob: 40px; /*Браузер не поддерживает мобила*/
}
/*для экранов более 480px */
@media screen and (min-width:481px) {
.squircle-houdini {
border-radius: var(--BorderOther); /* если нет поддержки браузера*/
--squircle-radius: var(--BorderHoudini); /* если есть поддержка браузера*/
--squircle-smoothness: 1;
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
}
/*для экранов до 480px */
@media screen and (max-width:480px) {
.squircle-houdini {
border-radius: var(--BorderOtherMob); /* если нет поддержки браузера*/
--squircle-radius: var(--BorderHoudiniMob); /* если есть поддержка браузера*/
--squircle-smoothness: 1;
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
}
</style>
<script type="text/javascript">
(async function () {
if (!("paintWorklet" in CSS)) {
await import("https://unpkg.com/css-paint-polyfill");
}
CSS.paintWorklet.addModule(
`https://www.unpkg.com/css-houdini-squircle/squircle.min.js`
);
})();
</script>