Live preview Avatars
Cusp Organic Corner Avatar
Four unequal corner radii keep morphing so the avatar never settles into a circle.
#border-radius CSS effects
10 free, pure-CSS effects match the "border-radius" tag. Each is copy-ready and needs no library or build step.
Effects tagged #border-radius
Live preview Progress
Brass Thread Progress
A hairline track with rounded caps whose warm brass fill breathes between six and eighty four percent.
Live preview Timelines
Hush Lifeline Timeline
Life events written in a quiet hand, each pinned by a slightly uneven ink ring on the margin.
Live preview Accordions
Cascade Pill Accordion
Fully rounded pill rows relax into soft rectangles as their body appears.
Live preview Avatars
Quartz Squircle Avatar
A gradient-lined squircle melts into a full circle when you hover it.
Live preview Modals
Kiln Maintenance Modal
A maintenance window notice grows out of a small glowing disc and squares off into a panel.
Live preview Modals
Ripple Contract Modal
A ruled paper contract summary settles from a soft blob into a sheet as a ripple spreads from its seal.
Live preview Progress
Opal Tide Progress
A round vessel filled to sixty two percent with a rotating blob that reads as a moving tide.
Live preview Sliders
Rivet Corner Radius
A riveted steel plate rounds all the way from a hard square into a full circle on hover.
Live preview Timelines
Monsoon Curved Timeline
Two wide elliptical arcs sweep between the nodes instead of a straight rail.