dashed-border-generator
dashed-border-generator copied to clipboard
kovart
pro and cons of backgroud image vs border image
https://developer.mozilla.org/fr/docs/Web/CSS/border-image would the latter be more optimised by the browser ? Less pixel artifact ?
Were you able to make it work as a border image? I tried copying the output and setting it as a border image but it didn't work.
Actually for my case I just want a border on one side of a div but I'm not sure how to make that work.
Were you able to make it work as a border image? I tried copying the output and setting it as a border image but it didn't work.
No I've never used it but I believe it is a native alternative to background image, albeit the generative GUI of this library is still useful. I suppose the border image is a bit more performant and would also allow the simultaneous use of a background image for styling differently the interior of the element, but I'm not sure.
Actually for my case I just want a border on one side of a div but I'm not sure how to make that work.
Oh that has nothing to do with this library but if that's what you need you can simply use
.box {
border-left: 1px solid red;
}
and padding Don't forget to use the autocompletion provided by your IDE ;) An alternative can sometimes be to use a ::before or after pseudo-element
Well to be clear, I actually want a dashed border and control over the spaces between the dashes with my border-left. So I'm not sure how to do that.
I don't think there is a css property for that but you can either handcraft it in SVG or use this library, the online demo expose the Dash Array to do something like that https://kovart.github.io/dashed-border-generator/#:~:text=It%27s%20a%20sequence%20of%20visible/invisible%20intervals. the bigger the number on the right, the bigger the spacing, it's a ratio
