18 Simple Styles for Horizontal Rules (hr CSS Design)

Friday, 13 September 2013
(4 votes)

The HR tag has traditionally been a way to add a horizontal line (sometimes called “horizontal rule”) into a web document. To add a line, you simply write:

<hr>

And the browswer will draw a line across the full width of the page (or parent element).

If you’ve ever put an HR element in your web pages, you’ll know how ugly they are and so it’s important to style any HR tag you use. A basic HR tag is displayed the way the browser wants to display it. Modern browsers typically display unstyled HR tags with a width of 100%, a height of 2px, and a 3D border in black to create the line.

Here in this post i'll  share custom Horizontal Rules (<hr>) with power of CSS.

Style 1:


hr {
	border-top: 1px solid #8c8b8b;
}

Style 2:


hr {
	border-top: 3px double #8c8b8b;
}

Style 3:


hr {
	border-top: 1px dashed #8c8b8b;
}

Style 4:


hr {
	border-top: 1px dotted #8c8b8b;
}

Style 5:


hr {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}

Style 6:


hr {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

Style 7:


hr {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

Style 8:


hr {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

Style 9:


hr {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}

Style 10:


hr {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}

Style 11:


hr {
	height: 6px;
	background: url(http://ibrahimjabbari.com/images/hr-11.png) repeat-x 0 0;
    border: 0;
}

Style 12:


hr {
	height: 6px;
	background: url(http://ibrahimjabbari.com/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

Style 13:


hr {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

Style 14:


hr { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

Style 15:


hr {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

Style 16:


hr { 
  border-top: 1px dashed #8c8b8b; 
} 
hr:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #f0f0f0; 
  color: #8c8b8b; 
  font-size: 18px; 
}

Style 17:


hr {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}

Style 18:


hr { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}

Live Demo on CodePen→

That's All ;)


Is it not a great idea to follow me to be recieve my last posts? Follow me now!

3492 times

Wednesday, 15 October 2014

Ibrahim Jabbari

I am Ibrahim Jabbari Web Designer / Developer since 2006, This is my blog, I'll share my experiences, Useful resources and all update news from IT world with you all, I hope you enjoy surfing my blog. Connect with me on Facebook, Twitter and and Instagram.

www.ibrahimjabbari.com