How to Style Horizontal Rules in CSS: Styling the hr Tag

The web design industry is constantly evolving, and one of the most important elements of any good website design is its ability to draw attention to important pieces of information.

The good news is that there are a few simple tricks you can use to make your content stand out from the pack.

One of these tricks is styling horizontal rules in CSS. If you’ve ever seen a website with a line or border separating sections of text, then you’ve seen the hr tag in action.

But did you know that with just a few lines of code, you can customize the style and make it look even better?

In this blog post, I'm going to show you how to style horizontal rules in CSS - custom style hr tags - using some cool samples and examples to make your content stand out in 2023.

From adjusting color palettes to getting creative with shapes and sizes, I'll show you all the ways you can easily transform an ordinary HR tag into an eye-catching element on your website.

---

What Are Horizontal Rules?

Horizontal rules are a classic styling element used to create a visual break in text and content. You’ve probably seen them before, often like a thin line separating two other pieces of content.

It helps define different sections within a page or post, and can be customized to fit any design.

So what is an HR (short for horizontal rule) exactly? It’s actually just another  that you can style with CSS.

---

The tag makes it easy to add these separators anywhere in your page content, making it look more visually organized and esthetically pleasing.

In 2022–2023, web design trends are shifting away from the basic plain lines and towards something more creative and unique.

Making use of modern CSS techniques allows you to customize your horizontal rules so that they stand out more, for example, by changing the color, width or thickness of the line itself. And there are plenty of other interesting stylings you can apply too!

By the end of this article, you will know all about how to style the HR tag with CSS in 2023 and beyond.

How to Style Horizontal Rules in HTML

If you've ever wanted to add a visual divider between sections of your website,

styling horizontal rules is one of the easiest ways to do so. In HTML, the <hr> tag is used for this purpose, creating a horizontal line across any page where it's placed.

And with CSS, you can customize this line in a variety of ways to make it stand out from the rest of your content.

To style a horizontal rule with CSS, you'll need to use two primary commands: border and background.

The border command lets you change the thickness and color of the line, while the background command allows you to set the background color that appears behind it.

You can also control how wide the line is, how much space there is between lines, and more.

Finally, if you want to add something extra special to your design, you can also create a custom HR element in HTML and then style it with CSS. By combining HTML and CSS together in this way, you can create unique styles that are sure to draw attention on any page they appear on!

Different Properties for Styling Hr Tag

The hr tag can be styled with a few different properties. You can set the background, border and even add a box shadow. Let's take a quick look at how you do each of these.

Backgrounds

It's super easy to set a background for your hr tags: just use the background property. You can add any color you like, or for more advanced styling, use something like a radial gradient. If you want to customize it further, you can also set a background image instead.

Borders

To style the borders of an hr tag, use the border property. Here you can set different styles (e.g., dotted, dashed or solid) and specify thicknesses and colors too.

Box Shadow

If you want to add some depth to your hr tags, you can use the box-shadow property. Here you can define how far and wide the shadow will spread (in pixels), its color and how light or dark it should be (i.e., opacity).

These are just a few of the possibilities when styling hr tags in CSS—go ahead and experiment with other things like gradients or shadows, too!

Examples of Styling Hr Tag in CSS

Styling the hr tag for custom HTML documents is an exciting way of paying attention to the tiniest details of your web design.

With some creative ideas, you can put a spin on the classic horizontal rule by adding a  or  and . You can even add animation or shadow opacity if you want to change things up.

Here are some samples of what’s possible with styling horizontal rules in CSS:

Dotted hr in CSS

<hr>

hr {
  border: none;
  border-top: 3px dotted #999;
  color: #999;
  background-color: #fff;
  height: 1px;
  margin: 20px 0;
}

Zigzag hr in CSS

hr {
  height: 10px;
  border: none;
  position: relative;
  background: #eaeaea;
}

hr::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 100px solid #4a7c59;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}

hr::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 100px solid #4a7c59;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}

Dashed Line with Circles

hr {
  height: 20px;
  border: none;
  position: relative;
  background: #eaeaea;
}

hr::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  background-image: radial-gradient(#4a7c59 0%, #4a7c59 50%, transparent 50%, transparent 100%);
  background-size: 20px 20px;
}

The wavy line in CSS

hr {
  height: 20px;
  border: none;
  position: relative;
  background: #eaeaea;
}

hr::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg' viewBox='0 0 100 100' height='100%25' width='100%25'><path d='M0 20 Q 25 0, 50 20 T 100 20 L 100 100 L 0 100 Z' fill='%234a7c59'/></svg>");
  background-repeat: repeat-x;
}

---

Best Practices for Styling Hr Tag

When it comes to styling the HR tag, there are a few best practices to keep in mind.

To make sure you're up to date with the latest web design standards, here are some tips and tricks to help you create amazing horizontal rules in CSS.

Use a Width Property

Using the width property when styling your horizontal rule will help prevent your line from extending further than expected.

By setting a maximum width of 100% it will ensure your line doesn’t get too long and stretch across your entire page or container. This can be easily achieved by adding width:100%; to your hr style declaration.

Add Margins and Padding

Adding margins and padding around your horizontal rule will give it a more natural look and ensure that it won't interfere with other elements on your page.

This can be achieved by using margin or padding properties for either side of your line, so that it won't overlap any text or images that may be placed next to it.

Pick an Appropriate Color

Choosing the right color for your line is just as important as making sure its length is suitable for its purpose. When it comes to picking a color, black or white are usually the best options.

Black will blend into the background while white will stand out against a colored background - making sure that the HR tag doesn’t go unnoticed by visitors.

Common Mistakes to Avoid When Styling Hr Tag

When styling the hr tag, it’s important to watch out for common mistakes that can affect its performance.

Aside from failing to implement it correctly, here are some other issues to look out for.

Not Using the Right Syntax

Making sure you're using the right syntax when styling your hr tag is absolutely critical - otherwise, you could make a huge mistake.

For example, some browsers may recognize a broken or badly written syntax as valid and work with it, but most won’t. To make sure your code works properly, always double-check the syntax you're using.

Forgetting to Include Shorthand Properties

Shorthand properties can help make your code easier to read and manage, but they must exist in order for them to work their magic.

For example, if you want to set a background color for your hr tag, you'll need both background-color and background settings in your code for it to be effective—the latter being the shorthand property for background color.

Overwriting Styles with Inline Styles

When styling your hr tags with CSS, don't overwrite styles with inline styles unless absolutely necessary - they can be hard to trace and debug if something goes wrong.

The same goes for any other style rules that have already been applied through external CSS documents or other classes and IDs. This will help keep everything organized and easier to troubleshoot later on!

Conclusion

In conclusion, there are countless ways to style 'hr' tags in HTML and CSS. With the new features and properties that are being added to the languages, the possibilities are almost endless. And the best part is that it's simple to do.

Whether it's creating custom horizontal lines for a website or adding a new layer of decoration to an interface, CSS and HTML have you covered.

From color, width and height to textures, gradients, and beyond, there’s a unique look to be created that’s both esthetically pleasing and practical.

So get creative and see what you can accomplish with a few lines of code!

---

Also Published