https://kovart.github.io/dashed-border-generator/
Custom Dashed Border | Online CSS Generator 🚀
https://kovart.github.io/dashed-border-generator/
border css dashed dotted generator stroke svg tool
Last synced: 3 months ago
JSON representation
Custom Dashed Border | Online CSS Generator 🚀
- Host: GitHub
- URL: https://kovart.github.io/dashed-border-generator/
- Owner: kovart
- Created: 2019-02-22T07:54:45.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T07:06:35.000Z (about 3 years ago)
- Last Synced: 2024-12-25T08:50:21.333Z (4 months 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: 355
- Watchers: 5
- Forks: 24
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-tools - Dashed Border Generator - When designers feel that the native border-dashed spacing no longer meets their needs, this tool can be used to generate custom dashed borders (Frontend Development)
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