Custom border image

I tried making custom dashes with an inline SVG background image, which works great on smaller boxes like 200x200 but fail once you get to larger sized images.

I then tried border image but I’ve never done it before and am seemingly doing something wrong. I basically am looking for a way to create these custom dashes and work for any size box :slight_smile: . What am I missing?

Well, the problem is related to your border-radius in the CSS… if i set it to 0, i get the rounded-rect showing up fine… (Why are we creating a circular border with a rounded-rect, btw?)

Presumably, as you’re increasing the border radius, the rounded-rect border is being concealed more and more as the browser narrows its field of vision on your rectangular border…the SVG is drawn for a 400x400 square, but with border radius applied, it becomes less-than.

(“Why does it work with the smaller one then?”)

You’ve set your SVG to round the corners on a 100px bias. A 200x200 image will therefore be a circle, as the entire thing is your bias, and therefore a CSS border radius wont affect what it can see - you’ve already drawn it as a circle.

1 Like

I’m not sure which way you were trying to go… but… ?

2 Likes

Thank you. The SVG had rect code in there because I generated it from https://kovart.github.io/dashed-border-generator/

Your large circle BG is what I’m going for. It allows me to have a rounded dash border on any size element . Much appreciated.

1 Like

Usually border image is used when you slice the corners and repeat the middle sections. It’s not really used to stretch a whole round image as you’d do that with a background image.

Border-image will only display when a border style has been set and does not take any notice of border-radius.

Border-image is a bit of a nightmare to work out which is why most people avoid it :slight_smile:

1 Like