1.1.0 ā¢ Published 1 year ago
houdini-dash-border v1.1.0
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
- 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.