How to use the Curved Section Divider
- The preview starts with a convex curve on the bottom edge; choose Scoop for the inverse.
- Try Curved angle, Wave or Scallops and set the number of repeats.
- Set the curve depth, and the edge (bottom, top or both).
- Copy the CSS.
Curves with clip-path
The curve is a polygon() with dozens of points that follow the arc, each set with calc(100% - …) so its depth stays fixed in px or vw. For a simple elliptical bottom you can also use border-radius: 0 0 50% 50% / 0 0 80px 80px, but that bends the corners of the content box too; the clip-path version cuts only the edge.
For layered waves see the SVG Wave Generator; for angles and zigzags, the Section Divider Generator.
Also searched as: curved section css, css curved bottom, curved hero section css, css curve divider, rounded section bottom css, css arc section.
Tools that pair well with the Curved Section Divider
- Angled Section CSS — Build angled, slanted or diagonal sections — the classic landing-page look — with one clip-path rule.
- Zigzag Border CSS — Cut a zigzag, sawtooth, scalloped or stepped edge into sections, cards, coupons and receipt designs.
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
Frequently asked questions
How do I make a curved bottom on a section?
Choose Curve and copy the CSS: a clip-path polygon traces a curve along the bottom edge. Alternatively border-radius: 0 0 50% 50% / 0 0 80px 80px gives a simple elliptical bottom.
Can the curve go inwards?
Yes — Scoop curves the edge inward, so the next section bulges up into this one.
Is a polygon curve smooth enough?
Yes. The curve uses dozens of points; at normal sizes it looks the same as an SVG curve.
Can I install Curved Section Divider as a web app and use it offline?
Yes. Curved Section Divider is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.