Como usar: 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.
Também pesquisado como: curved section css, css curved bottom, curved hero section css, css curve divider, rounded section bottom css, css arc section.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o Curved Section Divider como um aplicativo da web e usá-lo offline?
Sim. O Curved Section Divider é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.