rounded corners v1

by Petr Haluza

HTML

<div style="display:none">
<svg id="icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg> 
</div>
<template id="grab">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
    <path stroke="white" stroke-width="2" stroke-linecap="round" fill="none" d="
      M1,13 A12,12 0 0 1 13,1
      M19,1 H29
      M35,1 A12,12 0 0 1 47,13
      M47,19 V29
      M47,35 A12,12 0 0 1 35,47
      M29,47 H19
      M13,47 A12,12 0 0 1 1,35
      M1,29 V19
    " />
  </svg>
</template>





<div class="container">

<div class="frame border white">
  <div class="inner">
    <div class="image">
      <img src="https://www.hal3000.cz/images/footer/LogoMCR.png">
    </div>
    <div class="text">
     Jo to je HAL
    </div>
  </div>
</div>

<div class="frame border black">
  <div class="inner">Text<br> a takz</div>
</div>

<a class="button border white" href="#">
  <svg viewbox="0 0 24 24" class="svg logo"><use xlink:href="#icon-arrow-right" fill="white"></svg>
</a>

</div>

CSS

* {box-sizing: border-box}
html,body {background:black; padding:0; margin:0}

a {cursor:pointer}
.container {background:#222; padding:1em;}  
.image { position:relative; margin-top:-3em}

.frame {  border: 20px solid;  border-radius:15px}
.button {
  display:inline-block;
  margin:1em ;
  border: 20px solid;
  border-radius:15px;
  background:blue}

.button svg { position:absolute; height: 1em; margin: -.5em}





.border.white { border-image-source:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path stroke='white' stroke-width='2' stroke-linecap='round' fill='none' d='M1,13 A12,12 0 0 1 13,1 M19,1 H29 M35,1 A12,12 0 0 1 47,13 M47,19 V29 M47,35 A12,12 0 0 1 35,47 M29,47 H19 M13,47 A12,12 0 0 1 1,35 M1,29 V19' /></svg>")}

.border.black { border-image-source:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path stroke='black' stroke-width='2' stroke-linecap='round' fill='none' d='M1,13 A12,12 0 0 1 13,1 M19,1 H29 M35,1 A12,12 0 0 1 47,13 M47,19 V29 M47,35 A12,12 0 0 1 35,47 M29,47 H19 M13,47 A12,12 0 0 1 1,35 M1,29 V19' /></svg>")}

.frame { border-image-slice: calc(100% * 20 / 48)}
.button { border-image-slice: 16; transition:transform .35s}
.button:hover {transform:scale(1.15) rotate(90deg)}

JavaScript

const grab = document.getElementById('grab');
console.log("url('data:image/svg+xml;base64,"+btoa(grab.innerHTML.replace(/\r?\n */g,''))+"')");