HTML HR tag style with CSS Example

CSS Style to create horizontal line

The HR tag is used to add a horizontal line or divide the sections/contents on a webpage. Default HR style doesn’t look good and sometimes felt that it is boring and ugly. You have to apply some CSS coding to adjust the visual appearance of HR tag style. One can style it to look good and match as per your layout design. You can call CSS by using an external file or you can apply the CSS coding inline to the HR tag itself. Mostly inline CSS coding is applied in an email or newsletter.

The examples on this post will show you many styles of HR tag with CSS and with an example image also. Many designs we are sharing for your inspiration and you can pick any CSS style.

1. This is a simple one pixel solid line HR

simple one pixel solid line

2. Simple solid double line

solid double line

3. One pixel with dashed line

One pixel with dashed line

4. Single line with dotted style

Single line with dotted style

5. Bold line with dashed style

Bold line with dashed style

6. Bold line with dotted style

Bold line with dotted style

7. Two lines with top line dark and bottom line white emboss effect

Two lines with top line dark

8. Double line with emboss effects

Double line with emboss effects

9. Dashed line with emboss effects HR tag style

Dashed line with emboss effects

10. Dotted line with emboss effects

Dotted line with emboss effects

11. Using background image in the HR slash style

Using background image in the HR

12. Zigzag style with a background image

Zigzag style with a background

13. Horizontal lines with some drop shadow style like gradient faded

Horizontal lines with some drop shadow style

14. Single line with left and right faded style HR tag style

Single line with left and right faded

15. Double lines with hart shape in the center of line

Double lines with hart shape

16. Dotted line with some cutting object HR tag style

Dotted line with some cutting object HR tag style

17. Emboss line with some stylish object in center of line

Emboss line with some stylish object HR tag style

18. Left and right points two lines style

Left and right points two lines HR tag style

19. Zigzag effects with solid color fill style

Zigzag effects with solid color

20. Gradient style with bold line

Gradient style with bold line

October 20, 2017 by admin

Add a Comment

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