Skip to content

Instantly share code, notes, and snippets.

@dennysjmarquez

dennysjmarquez/18-simple-styles-for-horizontal-rules-hr-css-design.markdown

Created November 3, 2018 19:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dennysjmarquez/a482c8cb1f782ff6f21d7d214eb73ce1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dennysjmarquez/a482c8cb1f782ff6f21d7d214eb73ce1 to your computer and use it in GitHub Desktop.
Download ZIP
18 Simple Styles for Horizontal Rules (hr CSS Design)
Raw
index.html
<br>
<hr class="style1">
<br>
<hr class="style2">
<br>
<hr class="style3">
<br>
<hr class="style4">
<br>
<hr class="style5">
<br>
<hr class="style6">
<br>
<hr class="style7">
<br>
<hr class="style8">
<br>
<hr class="style9">
<br>
<hr class="style10">
<br>
<hr class="style11">
<br>
<hr class="style12">
<br>
<hr class="style13">
<br>
<hr class="style14">
<br>
<hr class="style15">
<br>
<hr class="style16">
<br>
<hr class="style17">
<br>
<hr class="style18">
Raw
style.css
body{
background-color: #f0f0f0;
width: 700px;
float: center;
}
hr.style1{
border-top: 1px solid #8c8b8b;
}
hr.style2 {
border-top: 3px double #8c8b8b;
}
hr.style3 {
border-top: 1px dashed #8c8b8b;
}
hr.style4 {
border-top: 1px dotted #8c8b8b;
}
hr.style5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}
hr.style6 {
background-color: #fff;
border-top: 2px dotted #8c8b8b;
}
hr.style7 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}
hr.style8 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}
hr.style8:after {
content: '';
display: block;
margin-top: 2px;
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}
hr.style9 {
border-top: 1px dashed #8c8b8b;
border-bottom: 1px dashed #fff;
}
hr.style10 {
border-top: 1px dotted #8c8b8b;
border-bottom: 1px dotted #fff;
}
hr.style11 {
height: 6px;
background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
border: 0;
}
hr.style12 {
height: 6px;
background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
border: 0;
}
hr.style13 {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
hr.style14 {
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);
}
hr.style15 {
border-top: 4px double #8c8b8b;
text-align: center;
}
hr.style15:after {
content: '\002665';
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}
hr.style16 {
border-top: 1px dashed #8c8b8b;
}
hr.style16:after {
content: '\002702';
display: inline-block;
position: relative;
top: -12px;
left: 40px;
padding: 0 3px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}
hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17: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);
}
hr.style18 {
height: 30px;
border-style: solid;
border-color: #8c8b8b;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style18:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #8c8b8b;
border-width: 0 0 1px 0;
border-radius: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment