How to create dashed rounded linear gradient border and control stroke length

Question

I need to create the border in the image:

Here is my css:

width: 170;
height: 170;
border-radius: 50%;
background:repeating-linear-gradient(300deg, transparent 0 4px, #fff 4px 6px), linear-gradient(300deg, #EC74E7 0%, #EC74E7 35%, #FF3055 80%, #FF3055 100%);
position: relative;

I was trying to do it with gradients overlapping each other, but can't seem to get it right. What I have so far:

Does anyone know how to?

Thanks

Answer 1

stroke-linecap: round;

I might be Useful

Answer 2

Here is an example of using the svg background for border styling.

.circle-one {
     position: relative;
     margin: 20px;
     height: 120px;
     width: 120px;
     background-color: white;
     border-radius: 50%;
     cursor: pointer;
     float:left;
    display: block;
}
 .circle-one:before {
     position: absolute;
     content: '';
     height: 100%;
     width: 100%;
     border: 2px dashed red;
     border-radius: 50%;
}
 .circle-one:hover:before {
     animation: spin-one 10s linear infinite;
}
 @keyframes spin-one {
     100% {
         transform: rotateZ(360deg);
    }
}
/* ==================================== */
 .circle-two {
     position: relative;
     margin: 20px;
     height: 120px;
     width: 120px;
     background-color: white;
     border-radius: 50%;
     cursor: pointer;
     float:left;
     display: block;
}
 .circle-two:before {
     position: absolute;
     content: '';
     height: 100%;
     width: 100%;
     background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='red' stroke-width='4' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
     border-radius: 50%;
}
 .circle-two:hover:before {
     animation: spin-one 10s linear infinite;
}
 @keyframes spin-two {
     100% {
         transform: rotateZ(360deg);
    }
}

<div class="circle-one"></div>
<div class="circle-two"></div>

May it helps :)