houdini-dash-border
v1.1.0
Published
Dashed borders in CSS with custom length, gap, and rounded ends
Downloads
11
Readme
Houdini Dashed Border
Dashed borders in CSS with custom length, gap, and rounded end caps.
| CSS Custom Property Name | Type | Description | Default |
|---|-------|------|---|
| --border-thickness
| number
| The thickness of the border drawn, in pixels | 2 |
| --border-length
| number
| The length of a dash, in pixels | 12 |
| --border-gap
| number
| The gap in-between each dash, in pixels | 5 |
| --border-dash-cap
| round \| square \| butt
| The end cap type for each dash. | round |
| --border-color
| color
| The color of the border. | lightgrey
|
Usage
🚧 Work in progress.
Solid Border
To turn off dashes, set the --border-gap
to 0
.
Hover Example
Often you'll want to have a dashed border by default and then on hover change the border to a solid line of a different color:
div {
--border-thickness: 2;
--border-length: 12;
--border-gap: 5;
--border-dash-cap: round;
--border-color: lightgrey;
background: paint(dashed-border);
}
div:hover {
--border-thickness: 3;
--border-length: 100;
--border-gap: 0;
--border-color: #f8e515;
background-color: #ffffef;
cursor: pointer;
}
Demo
Currently, only Chrome and Edge support the required Paint API. This will not work in Safari or Firefox.
Todo
- [x] Add option to change border radius (
--border-radius
) - [ ] Add option for multiple gap and length sizes of dashes
- [ ] Add random dash length and gap option
- [ ] Animate custom property changes.