A decorative line with rounded dashes
Create a nice decorative line with rounded dashes using a few lines of code
- Only one element
- Responsive (no cut or partial dash)
- You can easily switch to the vertical version
- Optimized with CSS variables
Code available here: css-shape.com/rounded-dashes
Resize the below demo to notice the responsive part
See the Pen Line with rounded dashes by Temani Afif (@t_afif) on CodePen.
More CSS Shapes: css-shape.com
More CSS Tips
- Curved avatar header with hover effect Create a fancy curved header with a cool hover effect.
- Inner curve/notch shape using CSS mask Create an inner curve using modern CSS and a few lines of code.
- Arc shape with rounded edges a few lines of modern CSS to create an arc shape with rounded edges.
- Get the width of the scrollbar using only CSS Using modern CSS features to get the scrollbar width as a CSS variable.