Skip to main content


With separators, content can have an area to breathe, suitable whitespace, or anything you call it.
Three kinds of separators are available in FlatifyCSS, dots, line, and short line.


Three gorgeous dots, that is all a long document needs. The opacity of the separators primarily are decreased, it helps element to tread more as a passive object in the playground, you can use opacity helper classes to change it.

<hr class="dots opacity-90" />
<hr class="dots color-red" />
<hr class="dots style-blue opacity-100" />

Classic line

This is a simple <hr>.

Short line

Sometimes classic <hr> is more interrupting than it should be, however, a short one can be beneficial.

<hr class="short" />
<hr class="short style-green" />
<hr class="short style-warning" />