.box{--mask:radial-gradient(30px at 30px 30px,#0000 calc(98% - 7px),#000 calc(100% - 7px)98%,#0000)-30px -30px,linear-gradient(90deg,#000 14px,#0000 0)-7px 50%/100% calc(100% - 60px + 7px)repeat-x,linear-gradient(#000 14px,#0000 0)50% -7px/calc(100% - 60px + 7px)100% repeat-y;position:relative}.box:before{content:"";-webkit-mask:var(--mask);-webkit-mask:var(--mask);mask:var(--mask);background:#000;position:absolute;inset:0}.gradient-box{box-sizing:border-box;color:#fff;background:#000 padding-box padding-box;border:5px solid #0000;border-radius:6px;padding:2px;position:relative}.gradient-box:before{content:"";border-radius:inherit;background:linear-gradient(#7dd3fc,#0369a1);margin:-5px;position:absolute;inset:0}