CODEWITHSUNDEEP
htmlcsssvg
Camilla
Camilla

Reputation: 49

Make border-image round

I am trying to design a round button with custom border effect. This is what I got so far:

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
button {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
}
<button>TEST</button>

But can I also make the border-image circle? Is this possible?

Upvotes: 4

Views: 199

Answers (1)

Temani Afif
Temani Afif

Reputation: 272772

Make it a circular element and then simply use it as background:

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
button {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border:5px solid transparent;
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cstyle%3E circle %7B animation: stroke 5s infinite linear; %7D @keyframes stroke %7B to %7B stroke-dashoffset: 600; %7D %7D %3C/style%3E%3ClinearGradient id="g" x1="0%25" y1="0%25" x2="0%25" y2="100%25"%3E%3Cstop offset="0%25" stop-color="%232d3561" /%3E%3Cstop offset="25%25" stop-color="%23c05c7e" /%3E%3Cstop offset="50%25" stop-color="%23f3826f" /%3E%3Cstop offset="100%25" stop-color="%23ffb961" /%3E%3C/linearGradient%3E%3Ccircle class="circle" cx="50" cy="50" r="45" fill="transparent" stroke="url(%23g)" stroke-width="3" stroke-dasharray="300" /%3E%3C/svg%3E') center/100% 100% border-box,
  #f2f2f2 padding-box;
}
<button>TEST</button>

Here is the SVG I used:

<svg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'>
  <style>
    circle {
      animation: stroke 5s infinite linear;
    }

    @keyframes stroke {
      to {
        stroke-dashoffset: 600;
      }
    }

  </style>
  <linearGradient id='g' x1='0%' y1='0%' x2='0%' y2='100%'>
    <stop offset='0%' stop-color='#2d3561' />
    <stop offset='25%' stop-color='#c05c7e' />
    <stop offset='50%' stop-color='#f3826f' />
    <stop offset='100%' stop-color='#ffb961' />
  </linearGradient>
  
  <circle class="circle" cx="50" cy="50" r="45" fill="transparent" stroke='url(#g)' stroke-width="3" stroke-dasharray='300' />
</svg>

Upvotes: 5

Related Questions