Houdini Dashed Border
Dashed borders in CSS with custom length, gap, and rounded end caps.
--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
CodePen Demo
Currently, only Chrome and Edge support the required Paint API. This will not work in Safari or Firefox.
Todo