Cómo 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.
También se busca como: curved section css, css curved bottom, curved hero section css, css curve divider, rounded section bottom css, css arc section.
Herramientas que combinan con: 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.
Preguntas frecuentes
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.
¿Puedo instalar Curved Section Divider como aplicación web y utilizarla sin conexión?
Sí. Curved Section Divider es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.