<!--Houdini border
https://mt-webdesign.ru/houdini-border-->
<script type="text/javascript">
(async function () {
if (!("paintWorklet" in CSS)) {
await import("https://unpkg.com/css-paint-polyfill");
}
await CSS.paintWorklet.addModule(
"https://www.unpkg.com/css-houdini-squircle/squircle.min.js"
);
document.body.classList.add("houdini-ready");
})();
</script>
<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);
}
}
body.houdini-ready .squircle-houdini {
mask-image: paint(squircle);
-webkit-mask-image: paint(squircle);
}
</style>