Softonic

CSS Divider Generator

Step 1 / 2 CSS
Content above
Content below
Next

Section dividers are the horizontal rules that separate blocks of a landing page, like the subtle line between two sections or the rule that closes a pricing table. This generator builds a simple horizontal divider: pick a line style (solid, dashed, dotted, double or groove), choose the color, set the thickness and margin, preview it between two mock sections and copy the resulting CSS.

How to build a divider

  1. 1

    Pick the line style

    Choose from solid, dashed, dotted, double or groove, the CSS border-top style used for the divider.

  2. 2

    Choose the color

    Match the line to your section background or brand color.

  3. 3

    Set thickness and margin

    Thickness ranges from 1 to 20 pixels; the margin controls the vertical space above and below the line.

  4. 4

    Preview between sections

    The divider is shown between two mock sections so you can check alignment and spacing.

  5. 5

    Copy the CSS

    Copy the ready `.divider` rule and paste it into your stylesheet.

Simple line dividers

/* Subtle horizontal rule */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* With text in the middle */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

Angled section transition

The clip-path trick:

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

The bottom-left corner is pulled up 48px, creating a diagonal slope. To transition cleanly, the next section should start flush against the slope, no white gap.

For a diagonal going the other way, swap which bottom corner is lifted. For a notch or zigzag, add more vertices.

SVG wave dividers

SVG is the cleanest way to do organic curves:

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* close any subpixel gap */
}

preserveAspectRatio="none" lets the SVG stretch to the container width regardless of source dimensions. margin-top: -1px closes the hairline gap some renderers leave.

Common divider library

Useful snippets:

Pattern Style
Dashed line border-top: 1px dashed currentColor
Dotted line border-top: 2px dotted currentColor; opacity: .4
Gradient line background: linear-gradient(to right, transparent, #999, transparent)
Ornamental Line + SVG ornament centred with ::before/::after
Angled slope clip-path: polygon(...) on the section above
Wave SVG with a cubic Bezier path
Inverted wave SVG with peaks rising into the section
Zigzag SVG with alternating points

Tips

  • Seam match. The divider’s background (SVG fill or angled section colour) must match the next section’s background exactly. A 1px off shade ruins the effect.
  • Avoid heavy curves on narrow screens. A wave that looks elegant at 1440px can look like a squashed sine at 360px. Use smaller amplitude on mobile via media queries, or a different SVG path.
  • Do not stack multiple dividers. One seam per section boundary is enough.
  • Performance. Inline SVG dividers are negligible; image-based dividers cost a network request. Inline SVG wins.

Frequently Asked Questions

SVG. CSS can do straight angled clips cleanly, but curves require approximations with many polygon vertices or workarounds. SVG paths handle smooth curves natively and scale to any width.

Subpixel rounding. Add margin-top: -1px (or -2px in some browsers) to the wave, or use display: block to avoid inline-element whitespace. Both tricks close the seam reliably.

Yes, visually. But if the section above is interactive (a button in the lower corner), the angled clip-path removes that region’s visible content while keeping the hit target, which can surprise users. Leave padding inside the angled section so interactive elements stay away from the cut edge.

No. Dividers are presentational and do not affect the page’s content, which is what search engines index. Semantic structure (headings, sections) matters for SEO; the decorative separator between them does not.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

Tool available in other languages