clip-path: shape()

Create complex custom shapes with precision and control

Triangle

clip-path: shape( from 50% 0%, line to 100% 100%, line to 0% 100%, close );

Heart

clip-path: shape( from 50% 20%, curve to 100% 0% via 75% 0%, curve to 100% 50% via 100% 25%, line to 50% 100%, ... );

Star

clip-path: shape( from 50% 0%, line to 61% 35%, line to 98% 35%, ... );

Morphing Blob

clip-path: shape( from 30% 0%, curve to 70% 0% via 50% -10%, ... );

Wave

clip-path: shape( from 0% 40%, curve to 25% 30% via 12.5% 30%, ... );

Hexagon

clip-path: shape( from 50% 0%, line to 100% 25%, line to 100% 75%, ... );

Diamond

clip-path: shape( from 50% 0%, line to 100% 50%, line to 50% 100%, ... );

Pentagon

clip-path: shape( from 50% 0%, line to 100% 38%, line to 82% 100%, ... );

Cloud

clip-path: shape( from 25% 50%, curve to 25% 25% via 25% 35%, ... );

Arrow

clip-path: shape( from 0% 40%, line to 60% 40%, line to 60% 0%, ... );

Message

clip-path: shape( from 10% 0%, line to 90% 0%, curve to 100% 10%, ... );

Badge

clip-path: shape( from 50% 0%, line to 65% 20%, line to 90% 15%, ... );

corner-shape

Transform corners with unique geometric styles

Round

Classic curves

border-radius: 50px; corner-shape: round;

Scoop

Inverted arc

border-radius: 50px; corner-shape: scoop;

Bevel

Angular cut

border-radius: 50px; corner-shape: bevel;

Notch

Sharp cutout

border-radius: 50px; corner-shape: notch;

Squircle

Superellipse

border-radius: 50px; corner-shape: squircle;

Real-World Examples

See these features in action with practical UI components

Abhinav Graphics

UI/UX Designer

5
HOT

Pro Plan

$29/mo

  • Unlimited projects
  • Priority support
  • Advanced analytics

New Like!

@AviNav liked your post

Browser Compatibility

Current support status for these features

clip-path: shape()

Chrome
135+
Safari
18.4+
Firefox
Soon

corner-shape

Chrome
139+
Edge
139+
Others
Soon