The horizontal rule goes by a handful of names across a variety of platforms. Some call it a divider. Others call it a separator or spacer. Regardless, it is a handy tool for creating a division between sections of your content. However, always using the same style of divider can be very tedious. Sometimes you want to create a stylized version that will give your content more flare. To help with this, we can use CSS to spice up your content to match your personality.

There’s a number of ways we can style a divider element. In this post, we’re going to go over how to do so using the border property in CSS.

Currently CSS elements are free to use if you turn on Pro settings. Eventually this will become a paid feature, so take note this styling will likely revert if/when you choose to be a free tier member.

How to Set Up CSS in Persumi

To make a horizontal rule in HTML, you will need to use <hr/> or --- in your text (the latter being the Markdown setup for a divider). This tiny code element creates that signature line across the page. However, with the use of CSS, we can add elements such as a border or image to replace that line.

CSS is styled per Persona as far as I can tell via testing. If you set up a CSS element in a Persona, all blocks and blog posts under that personal will be impacted. Of note, certain properties will only work for HTML blocks, as opposed to markdown text such as blog posts.

• Markdown text will adjust the border style but ignore any color properties.
• HTML text (Pro Block) will display color as well as style.

At this time, it seems all instances of borders ignore the border-width property. This greatly limits what we can do with borders. However, I will include the notes on all border styles in case width later becomes adjustable. I will continue testing this; if you have any success in your own formatting, please let me know!

The Basic CSS Template

If you are looking to make your own styling for your dividers, here’s the basic CSS you can copy/paste and edit.

hr {
	border-top-style: STYLE NAME; 
	border-bottom-style: hidden; 
	border-left-style: hidden; 
	border-right-style: hidden; 
	border-color: HEX CODE OR COLOR NAME;
	}

Border Colors

Like all CSS elements, you can use hex codes or a preset color name to set the color of your border elements. This is especially handy when you are dealing with specific branding that requires specific colors be used. Remember that Markdown borders will ignore color properties.

Border Styles

Borders can be set to a number of styles: solid, dashed, dotted, double, groove, hidden, none, ridge, inset, outset. As both hidden and none hide the border, there is no display for them in this selection. However, they are very handy due to the fact that borders are, by default, a box. We can set the properties for border-top-style, border-bottom-style, border-left-style, and border-right-style each individually. For some of these border styles, setting both top and bottom to the same style will look really good. For others, doing so would look really silly, and it is better to hide all but the top or bottom style. I’ve shown below each of the styles I would suggest.

Solid

hr {border-top-style: solid; border-bottom-style: hidden; border-left-style: hidden; border-right-style: hidden; border-color: #A4036F;}

Dashed

hr {border-top-style: dashed; border-bottom-style: hidden; border-left-style: hidden; border-right-style: hidden; border-color: #A4036F;}

Dotted

hr {border-top-style: dotted; border-bottom-style: hidden; border-left-style: hidden; border-right-style: hidden; border-color: #A4036F;}

Double

hr {border-top-style: double; border-bottom-style: hidden; border-left-style: hidden; border-right-style: hidden; border-color: #A4036F;}

Groove - hard to see

hr {border-top-style: groove; border-bottom-style: hidden; border-left-style: hidden; border-right-style: hidden; border-color: #A4036F;}

Ridge - hard to see

hr {border-top-style: ridge; border-bottom-style: hidden; border-left-style: hidden; border-right-style: hidden; border-color: #A4036F;}

Inset - hard to see

hr {border-style: inset; border-color: #A4036F;}

Outset - hard to see

hr {border-style: outset; border-color: #A4036F;}

Designing and testing your own custom divider styles will take time and practice, especially if you are unfamiliar with coding in HTML or CSS. However, the unique flair such styling adds to your personal page can be well worth the effort. Go forth, armed with your new knowledge, and start customizing your Persumi personas!