search

kovart / dashed-border-generator

Custom Dashed Border | Online CSS Generator 🚀
https://kovart.github.io/dashed-border-generator/
351 stars 24 forks source link

pro and cons of backgroud image vs border image #3

Open LifeIsStrange opened 4 years ago

LifeIsStrange commented 4 years ago

https://developer.mozilla.org/fr/docs/Web/CSS/border-image would the latter be more optimised by the browser ? Less pixel artifact ?

RheingoldRiver commented 1 year ago

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.

LifeIsStrange commented 1 year ago

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

RheingoldRiver commented 1 year ago

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.

LifeIsStrange commented 1 year ago

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

abhishekgahlot commented 9 months ago

what is all this scam going on ^ here? and tagging me