How to Style the HR Element with Tailwind CSS

Last updated on June 17, 2022 Pennywise Loading... Post a comment

An HTML <hr/> tag creates a horizontal ruler/line to separate sections of your webpage.

In order to style a <hr> element, we can use border-* utility classes provided by Tailwind CSS. Utilities in terms of size (width & height), margin, padding, and other utilities like bg-*, drop-shadow-*, cursor-*, etc, can also be used.

Let’s see the practical example below for more clarity.


The code:

<body class="p-20 space-y-10">
    <h2 class="text-xl italic">Welcome to</h2>
    <hr class="border-4 border-blue-500 cursor-pointer hover:border-red-500 duration-500" />
    <p>Hello There</p>
    <hr class="border-8 border-amber-500 hover:border-purple-500 drop-shadow-xl"/>
    <hr class="w-96 h-12 bg-green-500 opacity-50" />

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

You May Also Like