Kevin Powell - CommunityKP-C
Kevin Powell - Community•11mo ago•
43 replies
oemer

How to do a dashed border with a gradient and a border-radius in css?

Closest I could get to was with an svg background-image:

.dashed-border {
    background-size: 100% 100%;
    border-radius: 8px;
    padding: 2px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><linearGradient id="borderGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="6.34%" stop-color="%23fe8401" /><stop offset="51.74%" stop-color="%23c913b9" /><stop offset="97.13%" stop-color="%23009e9c" /></linearGradient></defs><path vector-effect="non-scaling-stroke" d="M8,1 H92 A7,7 0 0 1 99,8 V92 A7,7 0 0 1 92,99 H8 A7,7 0 0 1 1,92 V8 A7,7 0 0 1 8,1 Z" fill="none" stroke="url(%23borderGradient)" stroke-width="1" stroke-dasharray="6,6" /></svg>') !important;
}

This looks fine if you have a 100px to 100px box (see 2cnd picture). But the border should fit on any box. As soon as you increase width and height to another aspect ratio, it breaks, especially the border-radius (see 1st picture).

i also tried several different solutions, but nothing works as expected...
image.png
Was this page helpful?