https://github.com/kovart/dashed-border-generator
Custom Dashed Border | Online CSS Generator 🚀
https://github.com/kovart/dashed-border-generator
border css dashed dotted generator stroke svg tool
Last synced: 10 months ago
JSON representation
Custom Dashed Border | Online CSS Generator 🚀
- Host: GitHub
- URL: https://github.com/kovart/dashed-border-generator
- Owner: kovart
- Created: 2019-02-22T07:54:45.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T07:06:35.000Z (about 4 years ago)
- Last Synced: 2025-04-15T23:02:22.777Z (about 1 year ago)
- Topics: border, css, dashed, dotted, generator, stroke, svg, tool
- Language: HTML
- Homepage: https://kovart.github.io/dashed-border-generator/
- Size: 97.7 KB
- Stars: 371
- Watchers: 4
- Forks: 27
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dashed Border Generator
A simple online tool for creating custom dashed or dotted borders. Using CSS hack, this tool can simply increase space between dots, change dash length or distance between strokes.
## How does it work? 🚀
Native CSS properties **don't support** the customization of `border-style`.
Therefore, we use a trick with an ***SVG image inside*** `background-image` property.
The SVG features give us the ability to change the distance between dashed lines, set custom pattern, add dash offset or even change a line cap.
Generated SVG image is vector and it fills width and height of elements by 100%, so it doesn't matter what size elements have.
## [View in Action](http://kovart.github.io/dashed-border-generator/)
## Dependencies
* [VueJS](https://github.com/vuejs/vue)
* [Bootstrap 4](https://github.com/twbs/bootstrap)
* [vue-color](https://github.com/xiaokaike/vue-color)
* [mini-svg-data-uri](https://github.com/tigt/mini-svg-data-uri)
## License
[The MIT License](http://opensource.org/licenses/MIT)
Copyright (c) 2019-present, Artem Kovalchuk