{"id":338493,"date":"2021-04-16T07:31:41","date_gmt":"2021-04-16T14:31:41","guid":{"rendered":"https:\/\/css-tricks.com\/?p=338493"},"modified":"2021-04-16T07:31:43","modified_gmt":"2021-04-16T14:31:43","slug":"not-your-typical-horizontal-rules","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/not-your-typical-horizontal-rules\/","title":{"rendered":"Not Your Typical Horizontal Rules"},"content":{"rendered":"\n

The default browser style for <hr><\/code> is so weird<\/em>. It’s basically:<\/p>\n\n\n\n

border-style: inset;\nborder-width: 1px;<\/code><\/pre>\n\n\n\n
The default border-color<\/code> is black<\/code>, but the border doesn’t actually look<\/em> black, because the inset border “adds a split tone to the line that makes the element appear slightly depressed.”<\/p>\n\n\n\n\n\n\n\n
If I kick up the border-width<\/code> to 40px<\/code> you can see it more clearly:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
I often reset an <hr><\/code> to be “just a line” and it always gets me because I’ll try something, like height: 1px<\/code> with a background at first, but that’s not right. The easier way to clear it is to turn off all the borders then only use border-top<\/code> or border-bottom<\/code>. Or, turn off all the borders, set a height, and use a background. <\/p>\n\n\n\n
Annnyway…<\/em> Sara has some of the nicest horizontal rules in town on the current design of her site, and she’s written it all up.<\/a> Guess what? They aren’t even <hr><\/code> elements! It turns out the only styling hook you have is CSS, which wasn’t as adaptive as Sara needed, so she ended up with a <div role=\"separator\"><\/code> (TIL<\/abbr>!) and inline SVG.<\/p>\n\n\n\n
The best way to get the full flexibility of an SVG is by inlining it. But the <hr><\/code> element is content-less \u2014 it has no opening and closing tags within which you can place other elements.<\/p>
The only way to work around the limitations of <hr><\/code> while preserving semantics for screen reader users is to use a div<\/code> and provide the semantics of an hr<\/code> using ARIA.<\/p><\/blockquote>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
The default browser style for <hr> is so weird. It’s basically: The default border-color is black, but the border doesn’t […]<\/p>\n","protected":false},"author":3,"featured_media":338502,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[17],"tags":[18931],"class_list":["post-338493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-horizontal-rule"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/sara-soueidan-hr.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":344815,"url":"https:\/\/css-tricks.com\/css-logical-properties-and-values\/","url_meta":{"origin":338493,"position":0},"title":"CSS Logical Properties and Values","author":"Ollie Williams","date":"July 27, 2021","format":false,"excerpt":"Now that cross-browser support is at a tipping point, it's a good time to take a look at logical properties and values. If you're creating a website in multiple languages, logical properties and values are incredibly useful. Even if you're not, there are still some convenient new shorthands it's worth\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_23DCC53F37C675A56273FC1D596017BBDCB5DB765FF03E9E64CEC128CB81E439_1624787344817_blockandinline.png?fit=1200%2C454&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_23DCC53F37C675A56273FC1D596017BBDCB5DB765FF03E9E64CEC128CB81E439_1624787344817_blockandinline.png?fit=1200%2C454&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_23DCC53F37C675A56273FC1D596017BBDCB5DB765FF03E9E64CEC128CB81E439_1624787344817_blockandinline.png?fit=1200%2C454&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_23DCC53F37C675A56273FC1D596017BBDCB5DB765FF03E9E64CEC128CB81E439_1624787344817_blockandinline.png?fit=1200%2C454&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_23DCC53F37C675A56273FC1D596017BBDCB5DB765FF03E9E64CEC128CB81E439_1624787344817_blockandinline.png?fit=1200%2C454&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":558,"url":"https:\/\/css-tricks.com\/body-border\/","url_meta":{"origin":338493,"position":1},"title":"Creating a Body Border","author":"Chris Coyier","date":"May 25, 2011","format":false,"excerpt":"A border that goes all the way around the browser window and stays there when you scroll. In this article we cover a few different techniques to get it done, from the deepest browser support to the most progressive.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/02\/bodyborder-manydevices.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/02\/bodyborder-manydevices.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/02\/bodyborder-manydevices.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":275378,"url":"https:\/\/css-tricks.com\/css-logical-properties\/","url_meta":{"origin":338493,"position":2},"title":"CSS Logical Properties","author":"Chris Coyier","date":"August 21, 2018","format":false,"excerpt":"A property like margin-left seems fairly logical, but as Manuel Rego Casasnovas says: Imagine that you have some right-to-left (RTL) content on your website your left might be probably the physical right, so if you are usually setting margin-left: 100px for some elements, you might want to replace that with\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/logical-css-properties.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/logical-css-properties.gif?fit=800%2C400&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/logical-css-properties.gif?fit=800%2C400&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/logical-css-properties.gif?fit=800%2C400&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":8023,"url":"https:\/\/css-tricks.com\/three-sided-border\/","url_meta":{"origin":338493,"position":3},"title":"Three-Sided Border","author":"Chris Coyier","date":"December 6, 2010","format":false,"excerpt":"There are many ways to skin a cat. Also, there are many ways to accomplish the same thing in CSS. The three sided border is one of those things, so we'll look at four different examples that all do it. I would think this kind of thing is a bit\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21471,"url":"https:\/\/css-tricks.com\/3d-inset-parallax-effect\/","url_meta":{"origin":338493,"position":4},"title":"3D Inset Parallax Effect","author":"Josh Bader","date":"May 4, 2013","format":false,"excerpt":"The following is a guest post by Joshua Bader. Joshua noticed that certain 3D effects on the web could benefit from adjusting perspective as the web page is scrolled. I'll let him explain. People love to make flat things appear as if they're three-dimensional. There are two ways to pull\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":237034,"url":"https:\/\/css-tricks.com\/the-backgound-clip-property-and-use-cases\/","url_meta":{"origin":338493,"position":5},"title":"The `background-clip` Property and its Use Cases","author":"Ana Tudor","date":"February 5, 2016","format":false,"excerpt":"background-clip is one of those properties I've known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/338493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=338493"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/338493\/revisions"}],"predecessor-version":[{"id":338517,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/338493\/revisions\/338517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/338502"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=338493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=338493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=338493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}