<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <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"> </div> </div>

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; }