{"id":393,"date":"2015-10-25T03:06:15","date_gmt":"2015-10-25T03:06:15","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=393"},"modified":"2024-02-28T23:27:24","modified_gmt":"2024-02-28T23:27:24","slug":"style-hr-tag-with-css","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/style-hr-tag-with-css\/","title":{"rendered":"Style &lt;hr&gt; tag with CSS"},"content":{"rendered":"<p>In this post we will show you a few examples to style the <a href=\"https:\/\/www.cssportal.com\/html-tags\/tag-hr.php\">&lt;hr&gt; html tag<\/a> with css. The &lt;hr&gt; tag is used to add a horizontal line in a webpage, this line can be used to divide information or segments of your webpage.<!--more--><br \/>\n&lt;hr&gt; tags by themselves are rather boring and ugly, that is why we can use some simple css techniques to add a bit of style to our lines. One thing you&#8217;ll want to add to each css rule, is setting the <span class=\"code\"><a href=\"http:\/\/www.cssportal.com\/css-properties\/border.php\">border<\/a><\/span> property to 0, by doing this we are basically removing all borders of the current &lt;hr&gt; tag and starting with a blank canvas.<br \/>\nOK lets begin,<\/p>\n<style>\nhr.line-9 {\n  border: 0;\n  border-top: 1px solid #333;\n  border-bottom: 1px solid #fff;\n  margin:10px 0;\n}\nhr.line-6 {\n  border: 0;\n  border-top: 2px dotted #333;\n  margin:10px 0;\n}\nhr.line-7 {\n  border: 0;\n  background-color: #fff;\n  border-top: 2px dashed #333;\n  margin:10px 0;\n}\nhr.line-2{\n  border: 0;\n  border-bottom: 2px dashed red;\n  background: green;\n  margin:10px 0;\n}\nhr.line-1 {\n  border : 0;\n  height: 1px;\n  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));\n  margin:10px 0;\n}\nhr.line-5 {\n  border: 0;\n  border-top: 3px double #333;\n  margin:10px 0;\n}\nhr.line-14 {\n  border: 0;\n  height: 1px;\n  background-image: linear-gradient(to left, #f0f0f0, #8c8c8c, #f0f0f0);\n  margin:10px 0;\n}\nhr.line-13 {\n  height: 10px;\n  border: 0;\n  box-shadow: 0 10px 10px -10px #8c8c8c inset;\n  margin:10px 0;\n}\nhr.line-18 {\n  border: 0;\n  height: 30px;\n  border-style: solid;\n  border-color: #333;\n  border-width: 1px 0 0 0;\n  border-radius: 20px;\n  margin:10px 0;\n}\nhr.line-18:before {\n  display: block;\n  content: \"\";\n  height: 30px;\n  margin-top: -31px;\n  border-style: solid;\n  border-color: #333;\n  border-width: 0 0 1px 0;\n  border-radius: 20px;\n}\nhr.line-4 {\n  padding: 0;\n  border: none;\n  border-top: medium double #333;\n  color: #8c8c8c;\n  text-align: center;\n  margin:10px 0;\n}\nhr.line-4:after {\n  content: \"\u00a7\";\n  display: inline-block;\n  position: relative;\n  top: -0.7em;\n  font-size: 1.5em;\n  padding: 0 0.25em;\n  background: #fff;\n}\nhr.line-15 {\n  border: 0;\n  border-top: 4px double #333;\n  text-align: center;\n  margin:10px 0;\n}\nhr.line-15:after {\n  content: '\\2665';\n  display: inline-block;\n  position: relative;\n  top: -15px;\n  padding: 0 10px;\n  background: #fff;\n  color: #333;\n  font-size: 18px;\n}\nhr.line-16 {\n  border: 0;\n  border-top: 1px dashed #333;\n  text-align:center;\n  margin:10px 0;\n}\nhr.line-16:after {\n  content: '\\002702';\n  display: inline-block;\n  position: relative;\n  top: -13px;\n  padding: 0 3px;\n  background: #fff;\n  color: #333;\n  font-size: 18px;\n}\nhr.line-17 {\n  border: 0;\n  height: 0;\n  box-shadow: 0 0 10px 1px black;\n  margin:10px 0;\n}\nhr.line-19 {\n  border: none;\n  height: 10px;\n  background: linear-gradient(-135deg, #fff 5px, transparent 0) 0 5px, linear-gradient(135deg, #fff 5px, #8c8c8c 0) 0 5px;\n  background-color: #fff;\n  background-position: left bottom;\n  background-repeat: repeat-x;\n  background-size: 10px 10px;\n  margin:10px 0;\n}\n<\/style>\n<p>1. Our first example will show a single solid border of 1px.<\/p>\n<hr class=\"line-9\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  border-top: 1px solid #333;\r\n  border-bottom: 1px solid #fff;\r\n}<\/code><\/pre>\n<p>2. Similar to the above, instead the border is dotted.<\/p>\n<hr class=\"line-6\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  border-top: 2px dotted #333;\r\n}<\/code><\/pre>\n<p>3. Again similar to above, instead the border is dashed.<\/p>\n<hr class=\"line-7\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  background-color: #fff;\r\n  border-top: 2px dashed #333;\r\n}<\/code><\/pre>\n<p>4. This example shows a dashed border with multiple colors.<\/p>\n<hr class=\"line-2\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  border-bottom: 2px dashed red;\r\n  background: green;\r\n}<\/code><\/pre>\n<p>5. This line has a gradient line using linear-gradient as the background.<\/p>\n<hr class=\"line-1\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border : 0;\r\n  height: 1px;\r\n  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));\r\n}<\/code><\/pre>\n<p>6. Instead of a single solid line, this example uses a double line.<\/p>\n<hr class=\"line-5\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  border-top: 3px double #333;\r\n}<\/code><\/pre>\n<p>7. Another example of an gradient line.<\/p>\n<hr class=\"line-14\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  height: 1px;\r\n  background-image: linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);\r\n}<\/code><\/pre>\n<p>8. An example with a shadow.<\/p>\n<hr class=\"line-13\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  height: 10px;\r\n  border: 0;\r\n  box-shadow: 0 10px 10px -10px #333 inset;\r\n}<\/code><\/pre>\n<p>9. This one is a bit fancier, with rounded edges at the end.<\/p>\n<hr class=\"line-18\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  height: 30px;\r\n  border-style: solid;\r\n  border-color: #333;\r\n  border-width: 1px 0 0 0;\r\n  border-radius: 20px;\r\n}\r\nhr:before {\r\n  display: block;\r\n  content: \"\";\r\n  height: 30px;\r\n  margin-top: -31px;\r\n  border-style: solid;\r\n  border-color: #333;\r\n  border-width: 0 0 1px 0;\r\n  border-radius: 20px;\r\n}<\/code><\/pre>\n<p>10. Another fancy line adding a symbol in the center.<\/p>\n<hr class=\"line-4\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  padding: 0;\r\n  border: none;\r\n  border-top: medium double #333;\r\n  color: #333;\r\n  text-align: center;\r\n}\r\nhr:after {\r\n  content: \"\u00a7\";\r\n  display: inline-block;\r\n  position: relative;\r\n  top: -0.7em;\r\n  font-size: 1.5em;\r\n  padding: 0 0.25em;\r\n  background: #fff;\r\n}<\/code><\/pre>\n<p>11. Similar to above with different symbol.<\/p>\n<hr class=\"line-15\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  border-top: 4px double #333;\r\n  text-align: center;\r\n}\r\nhr:after {\r\n  content: '\\2665';\r\n  display: inline-block;\r\n  position: relative;\r\n  top: -15px;\r\n  padding: 0 10px;\r\n  background: #fff;\r\n  color: #8c8c8c;\r\n  font-size: 18px;\r\n}<\/code><\/pre>\n<p>12. Similar to above with different symbol.<\/p>\n<hr class=\"line-16\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  border-top: 1px dashed #333;\r\n  text-align:center;\r\n}\r\nhr:after {\r\n  content: '\\002702';\r\n  display: inline-block;\r\n  position: relative;\r\n  top: -13px;\r\n  padding: 0 3px;\r\n  background: #fff;\r\n  color: #333;\r\n  font-size: 18px;\r\n}<\/code><\/pre>\n<p>13. Another example with a box shadow effect.<\/p>\n<hr class=\"line-17\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: 0;\r\n  height: 0;\r\n  box-shadow: 0 0 10px 1px black;\r\n}<\/code><\/pre>\n<p>14. Example with a zig-zag effect.<\/p>\n<hr class=\"line-19\" \/>\n<pre class=\"language-css\"><code>hr {\r\n  border: none;\r\n  height: 10px;\r\n  background: linear-gradient(-135deg, #fff 5px, transparent 0) 0 5px, linear-gradient(135deg, #fff 5px, #8c8c8c 0) 0 5px;\r\n  background-color: #fff;\r\n  background-position: left bottom;\r\n  background-repeat: repeat-x;\r\n  background-size: 10px 10px;\r\n}<\/code><\/pre>\n<p>That&#8217;s all the examples we have at the moment, we will be adding more in the future. If you have a great design for the &lt;hr&gt; tag, please either contact us with the code or leave a comment below and we will add them to our list.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post we will show you a few examples to style the &lt;hr&gt; html tag with css. The &lt;hr&gt; tag is used to add a horizontal line in a webpage, this line can be used to divide information or segments of your webpage.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,7],"tags":[],"class_list":["post-393","post","type-post","status-publish","format-standard","hentry","category-css","category-html","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":6,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/393\/revisions"}],"predecessor-version":[{"id":584,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/393\/revisions\/584"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}