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: about 1 month 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 (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-10T07:06:35.000Z (almost 3 years ago)
• Last Synced: 2024-09-12T13:47:26.053Z (3 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: 342
• Watchers: 5
• Forks: 24
• Open Issues: 6
• 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/)

![intro](./intro.png)

## 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