How to Style Horizontal Rule HTML or hr Tag With CSS on WordPress

8 min read

This page contains affiliate links. Meaning, I get a commission if you purchase through my links, at no cost to you. Read the full disclosure here.

HTML horizontal rule or hr tag CSS styles for WordPress users
The hr tag, which is short for Horizontal Rule in HTML—the markup language behind all websites—is a simple yet powerful element of web design, especially websites that have a lot of written content. This is why a lot of bloggers use it, as they should, to separate their text into bite-sized content.

In today’s post, I want to explain what they are and how to use them. Additionally, I’ll also show you how to customize the styles of these horizontal rules with CSS because sometimes those little details add up to make a beautiful website.

In this post:

What is an HTML hr tag or Horizontal Rule

A Horizontal Rule or <hr> tag is, as the name suggests, a thin horizontal line that you can add to a web page to create a visual separation of its contents. This is what an <hr> tag looks like in use:

See the Pen
TSB – hr style
by Maliha Mannan (@maliha-mannan)
on CodePen.

Why or when to use the HTML horizontal rule or hr tag

As I’ve said, it’s a think straight line that creates a visual break or separation.

You can use it in your blog posts or pages to separate topics and subtopics. Essayists and short story writers use them to divide chapters or sections. That is the primary purpose of <hr> tags: to separate. It helps readers understand that what comes below an <hr> tag is shifting away from what came before the <hr> tag.

Prerequisites to customizing the hr tags

Note that these tutorials are for self-hosted WordPress users. Basically, you’ll need your own domain and hosting (I like SiteGround hosting for WordPress) to use the styles I’ll show you below. Here’s a tutorial for how to start your blog on self-hosted WordPress.

You can still use them if you’re on a blogging platform that allows you to add custom codes with site-wide implementation. But yeah, I wrote this tutorial primarily with self-hosted WordPress users in mind.

How to add the HTML hr tag

There are multiple ways to add the <hr> tag.

In a code editor:

As you can see in the Codepen above, using the <hr> tag is super simple. You literally have to type the following in a website’s—such as a page’s or blog post’s—code or text editor:

<hr>

Using three dashes in the visual editor:

In some editors, including WordPress when you’re in its visual editor, you can add the <hr> tag just by typing three dashes (—) followed up by pressing the “Enter” key to go into a new line. This is useful and worth remembering if you tend to type in WordPress’s visual editor like I do.

Simply:

  1. Go to a new line.
  2. Type: “- – -” (without the quotation marks or the spaces in-between them.)
  3. Hit the “Enter” key to go to the next line and the dashes will automatically convert into a horizontal rule.

Note that this works only when you’re in WordPress’s visual editor mode. This doesn’t work on all platforms. if you’re on a different platform than WordPress, try it out and see if it works. If not, you can always type <hr> in the code/text editor of your platform.

Using the platform’s editing options:

If you’re on WordPress and using the Gutenberg (default) editor, then both of the above methods will work. In addition, you can also add a “separator” from the edition options.

Basically, click the plus sign (+) in the editor and search for “Separator.” Clicking it will add a horizontal rule in your content.

Adding a horizontal rule in WordPress Gutenberg editor using a "separator."
Adding a horizontal rule in the WordPress Gutenberg editor using a “separator.”

Here’s a video showing you the different methods for adding a horizontal rule or hr tag:

A Note on hr tags on WordPress Gutenberg vs. Classic

Can I be honest with you?

I personally do not enjoy Gutenberg because I think they make things unnecessarily complicated.

It’s been years since the release of Gutenberg and yet I continue to use the WordPress Classic editor (using the Classic Editor plugin) and I know many other bloggers who do the same.

Anyhow, in the classic editor, you have two options for adding a horizontal rule: you can either use the three-dash method in the visual editor, or type <hr> in the text editor. Simple and straight-forward.

Additionally, if you, like me, think that the default <hr> tags are boring-looking, and want to make them look cute with CSS, the Gutenberg editor makes it slightly more tedious.

But don’t worry. I already took those things into account. So, if you copy/paste the codes below, whether you’re using classic editor or Gutenberg, they should work for both. Enjoy! 🙂

How to Style Horizontal Rules or hr Tags

For this, you have to use CSS.

Worry not, I’ll do my best to give you simple instructions.

Just a quick explainer first:

To style any HTML element, in our case the <hr> tag, you have to use that element’s name, as any class or id, if there’s any, and then add your custom styles using CSS. But you don’t really need to understand all that right now, nor can I explain it all here as that’s outside the scope of this post.

Instead, what I will do is give you the codes and tell you where to add them without explaining why or how the codes work.

If you want to understand what’s happening better, I recommend learning basic HTML and CSS. There are plenty of resources out there, so just google ’em.

Anyhow, without further ado, let me show you 5 distinct styles for horizontal rules or <hr> tags.

Where to add the hr tag CSS styles

Gutenberg and associated “improvements” make this annoying and unnecessarily complicated too. Most themes, thankfully, still uses WordPress’s Customizer option. But for those that do not, I’ll share an alternative method.

Method 1: Customizer

If your theme allows, you should have a “Customize” option in your WordPress dashboard under “Appearance.”

WordPress Dashboard > Appearance > Customize
WordPress Dashboard > Appearance > Customize

Click it, and on the next page, find and click the tab that says “Additional CSS.” That will allow you to type codes and that’s where you’ll copy and paste the code I’ll give you below.

Custom CSS under the customizer's Additional CSS tab.
Custom CSS under the customizer’s Additional CSS tab.

This is my favorite method so far and the easiest. Most themes should have it (my favorite being Astra) but in case you do not see the “Customize” option, check Method # 2 below.

Method 2: Using a plugin

If you do not see “Customize” under Appearance, then use a plugin. Advanced users may use their child theme’s stylesheet, but assuming you’re not an advanced user, a plugin would be best.

In fact, there’s a plugin I like quite a bit and it lets you add all sorts of code snippets that you can activate or deactivate with a click. The plugin is called WPCode.

To activate it, go to your Plugins tab, click “Add New Plugin,” and then search for WPCode. The search result should show you the plugin. Install and activate.

Once it is activated, you should see a new tab on your dashboard: Code Snippets.

Click “Code Snippets.” There may be some [deactivated] snippets already; ignore them.

Click “Add new” toward the top of the page.

Add new code snippet using the WPCode plugin.
Add new code snippet using the WPCode plugin.

On the next page, click “Add Your Custom Code (New Snippet).”

Then, do a few things:

  • Give your snippet a name. To make it obvious, I’ll call it “hr styles.”
  • From the dropdown on the top-right side, choose “CSS snippet.”
  • Paste the appropriate code (that I’ll be sharing below) in the preview area.
  • Toward the top-right, you should see a toggle button that should be deactivated by default. Toggle it to activate.
  • Then, next to this toggle, you should see a button for saving this code. Click “Save Snippet.”

And that should do it.

Code Snippet editor.
Code Snippet editor.

Now, let’s look at the different styles:

Horizontal rule or hr tag styles

I’ll give you three different styles, use whichever you like.

Style # 1
hr tag style # 1
hr tag style # 1

If you want this style, copy and paste this code into your code snippet:

hr, hr.wp-block-separator {
  width: 90%;
  max-width: 90%!important;
  border: 0!important;
  height: 2px!important;
  background: #000000!important;
  background-image: linear-gradient(to right, #f6f6f6, #000000, #f6f6f6)!important;
  margin: 35px auto!important;
}
Style # 2
hr tag style # 2
hr tag style # 2

Use this code:

hr, hr.wp-block-separator {
  overflow: visible!important; 
  padding: 0!important;
  height: 1px!important;
  width: 90%!important;
  max-width: 90%!important;
  border: 1px #000!important;
  color: #000!important;
  text-align: center!important;
  background-image: linear-gradient(to right, #f6f6f6, #000000, #f6f6f6)!important; 
  margin: 35px auto!important;
}
hr:after, hr.wp-block-separator:after {
  content: "⯁";
  display: inline-block!important;
  position: relative!important;
  top: -0.55em!important;
  font-size: 1.6em!important;
  padding: 0 0.5em!important;
  background: #fff!important; /* use hex code of the background color of your page */
}
Style # 3
hr tag style # 3
hr tag style # 3

Code:

hr, hr.wp-block-separator {
  overflow: visible!important; 
  width: 25px!important;
  max-width: 25px!important;
  margin: 50px auto 25px!important;
  height: 30px!important;
  border-style: solid!important;
  border-color: #000!important;
  border-width: 1px 0 0 0 !important;
  border-radius: 30px!important;
  background-color: #fff!important; 
}
hr:after, hr.wp-block-separator:after {
  display: block;
  content: "";
  height: 30px;
  margin-top: -30px;
  border-style: solid;
  border-color: #000;
  border-width: 0 0 1px 0!important;
  border-radius: 30px!important;
}
Style # 4
hr tag style # 4
hr tag style # 4

Code:

hr, hr.wp-block-separator { 
  overflow: visible!important; 
  padding: 0!important; 
  height: 30px!important; 
  width: 90%!important; 
  max-width: 90%!important; 
  border: 0!important; 
  text-align: center!important; 
  margin: 35px auto!important;
  background-color: #fff!important; 
}
hr:after, hr.wp-block-separator:after { 
  content: "● ● ●"; 
  display: inline-block!important; 
  position: relative!important; 
  font-size: 1.3em!important; 
  padding: 0 0.5em!important; 
  color: #000;
}
Style # 5
hr tag style # 5
hr tag style # 5

Code:

hr, hr.wp-block-separator { 
  overflow: visible!important; 
  width: 35px!important; 
  max-width: 35px!important; 
  border: 0!important;
  border-bottom: 3px dashed #000!important;
  background: #fff!important;
  margin: 35px auto!important;
}

That’s it; these are the five different styles for an HTML horizontal rule or <hr> tag. Hope you liked them 🙂

Horizontal Rules For the Non-WordPress Users

Now, if you’re not on WordPress (say, if you blog on Medium or Substack, for example) then you could use images as separators too. I’ve made a video showing exactly how you can make those image separators using Canva (below).

FYI, I talk about hr tags for almost half of the video. If you want to go to the Canva tutorial right away, watch from 8:10.

FYI#2: You’ll need Canva Pro for this (so you can download your separator images with a transparent background. If you’re not a paid subscriber yet, feel free to sign up for a 30-day Canva Pro trial right here.


Now that’s really it. Feel free to share your thoughts and comments (or questions) below.

Before I go, to get weekly blogging, online marketing, and income tips right in your inbox + instant access to my library of freebies, subscribe to my email list below.

Subscribe to Unlock TONS of FREEBIES!!!

Sign up for weekly tips on blogging, branding, design, business, and monetizing your hobbies and skills + Subscribers get access to the library of EPIC freebies! 

Your email is safe here; no spam, like, EVER! You can unsubscribe at any time.

Leave a Comment

Your email address will not be published. Required fields are marked *