v150 · CSS · demo
Shape Explorer
Choose a polygon shape and adjust the corner radius. The round <length> parameter softens every vertex of a polygon() uniformly — watch the shape and the CSS update together.
Shape
Corner radius
Tightest effective radius
0px
No clamping at this radius.
Without round
With round
round unit boundary
Polygon coordinates may be percentages, but the rounding slot itself is a CSS length. These probes run the exact clip-path: polygon() forms that separate the two.
clip-path: polygon(0% 0%, 100% 0%, 50% 100%)
checking
clip-path: polygon(round 12px, 0% 0%, 100% 0%, 50% 100%)
checking
clip-path: polygon(round 10%, 0% 0%, 100% 0%, 50% 100%)
checking
Waiting for CSS parser results…
see also
- Clip-Path Gallery — preset rounded shapes
- Animated Clip Path — transitions and keyframes between sharp and rounded polygons
- offset-path Rounded Polygon — motion paths using the same rounded polygon syntax
- shape-outside Rounded Polygon — text flow around rounded polygon exclusions
- Back to feature index
- ChromeStatus entry
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗