A decorative line with rounded dashes 관련

CSS > Article(s)

---

Article(s)

• More CSS Tips

---

A decorative line with rounded dashes

A few lines of code to create a nice decoratinve 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

CSS-only decorative lines with rounded dashes

Info

Code available here:

CSS Shape: Rounded Dashes

A CSS-only Rounded Dashes shape made with a single-element and modern CSS.

Resize the below demo to notice the responsive part

See Line with rounded dashes by t_afif on CodePen.

More CSS Shapes

The Ultimate CSS Shapes Collection

The modern way to create CSS shapes using a minimal code and a single element. A collection of CSS-only shapes created by Temani Afif.

---

More CSS Tips

• Curved avatar header with hover effect Create a fancy curved header with a cool hover effect. August 29, 2024
• Inner curve/notch shape using CSS mask Create an inner curve using modern CSS and a few lines of code. August 28, 2024
• Arc shape with rounded edges a few lines of modern CSS to create an arc shape with rounded edges. August 07, 2024
• Get the width of the scrollbar using only CSS Using modern CSS features to get the scrollbar width as a CSS variable. July 31, 2024

A decorative line with rounded dashes

---

A few lines of code to create a nice decoratinve line with rounded dashes