{"id":15939,"date":"2012-01-10T11:07:20","date_gmt":"2012-01-10T18:07:20","guid":{"rendered":"http:\/\/css-tricks.com\/?p=15939"},"modified":"2015-03-28T05:55:20","modified_gmt":"2015-03-28T12:55:20","slug":"better-tabs-with-round-out-borders","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/better-tabs-with-round-out-borders\/","title":{"rendered":"(Better) Tabs with Round Out Borders"},"content":{"rendered":"<div class=\"explanation\">The following is a guest post by <a href=\"http:\/\/www.mennovanslooten.nl\/\" rel=\"noopener\">Menno van Slooten<\/a>. You might notice we&#8217;ve been <a href=\"https:\/\/css-tricks.com\/tabs-with-round-out-borders\/\">down this road before<\/a>, but I quite like Menno&#8217;s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements.<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/article-illustration-1.png?resize=200%2C200\" alt=\"\" width=\"200\" height=\"200\" class=\"alignright size-full wp-image-15940\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/article-illustration-1.png?w=200&amp;ssl=1 200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/article-illustration-1.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/article-illustration-1.png?resize=100%2C100&amp;ssl=1 100w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/p>\n<p>A good-looking tab control usually has one feature that I&#8217;ve always found impossible to reproduce without images: borders that bend to the <em>outside<\/em> at the bottom of each tab. In this article I would like to show how you can use the CSS <code>:before<\/code> and <code>:after<\/code> pseudo elements to create this effect without using images. First, let&#8217;s start with some basic markup.<\/p>\n<h3>The markup<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;ul class=\"tabrow\"&gt;\r\n   &lt;li&gt;Lorem&lt;\/li&gt;\r\n   &lt;li&gt;Ipsum&lt;\/li&gt;\r\n   &lt;li class=\"selected\"&gt;Sit amet&lt;\/li&gt;\r\n   &lt;li&gt;Consectetur adipisicing&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/code><\/pre>\n<p>This would be about as basic as you can get. Not a lot of elements to work with here, but it will do.<\/p>\n<h3>Getting started<\/h3>\n<p>To get started, let&#8217;s get rid of the default <code>&lt;ul&gt;<\/code> and <code>&lt;li&gt;<\/code> styling and get these babies in line.<\/p>\n<div id=\"example-1\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code class=\"language-css\">.tabrow {\r\n  text-align: center;\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  line-height: 24px;\r\n}\r\n.tabrow li {\r\n  margin: 0 10px;\r\n  padding: 0 10px;\r\n  border: 1px solid #AAA;\r\n  background: #ECECEC;\r\n  display: inline-block;\r\n}<\/code><\/pre>\n<h3>Selecting a tab<\/h3>\n<p>The selected tab should of course be clearly visible.<\/p>\n<div id=\"example-2\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code>.tabrow li.selected {\r\n  background: #FFF;\r\n  color: #000;\r\n}<\/code><\/pre>\n<h3>Getting to the bottom of things<\/h3>\n<p>Every tab control needs a well-defined bottom edge. It won&#8217;t do much now, but later it will help emphasize the effect of the selected tab being on top.<\/p>\n<div id=\"example-3\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code>.tabrow {\r\n  position: relative;\r\n}\r\n.tabrow:after {\r\n  position: absolute;\r\n  content: \"\";\r\n  width: 100%;\r\n  bottom: 0;\r\n  left: 0;\r\n  border-bottom: 1px solid #AAA;\r\n  z-index: 1;\r\n}<\/code><\/pre>\n<p>Here we introduced our first <code>:after<\/code> pseudo-element. Basically, <code>:after<\/code> appends another child to an element. It&#8217;s not in the DOM (which is why it&#8217;s called a <em>pseudo<\/em> element), so it is not a real child but it is completely stylable, as long as you add some <code>content<\/code>, in this case a single space character.<\/p>\n<p>In my opinion, the terms <code>:before<\/code> and <code>:after<\/code> are slightly confusing since the pseudo&#8217;s aren&#8217;t actually added before or after the element they apply to, but are inserted as children. This is also why you can&#8217;t apply <code>:before<\/code> and <code>:after<\/code> to elements that can&#8217;t contain children (&#8220;no content&#8221; elements), like <code>&lt;input&gt;<\/code>.<\/p>\n<p>In this case, we use the pseudo element to create a bottom border that doesn&#8217;t influence the tabs&#8217; positioning. We could have just put a bottom border on the <code>&lt;ul&gt;<\/code> but that would&#8217;ve made the next step a little trickier.<\/p>\n<h3>Above and beyond<\/h3>\n<p>Now, an essential part of a convincing looking tab control, is that the selected tab sits <em>in front of<\/em> the edge while the rest fall behind the edge. To do this, we change its bottom border and do some <code>z-index<\/code> magic.<\/p>\n<div id=\"example-4\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code class=\"language-css\">.tabrow:before {\r\n  z-index: 1;\r\n}\r\n.tabrow li {\r\n    position: relative;\r\n  z-index: 0;\r\n}\r\n.tabrow li.selected {\r\n  z-index: 2;\r\n  border-bottom-color: #FFF;\r\n}<\/code><\/pre>\n<h3>Around the bends<\/h3>\n<p>It is now time to add the elusive border that bends to the outside and we&#8217;ll use <code>:before<\/code> and <code>:after<\/code> for this. Let&#8217;s take this step by step and first just put everything in position.<\/p>\n<div id=\"example-5\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code>.tabrow li:before,\r\n.tabrow li:after {\r\n  position: absolute;\r\n  bottom: -1px;\r\n  width: 6px;\r\n  height: 6px;\r\n  content: \" \";\r\n}\r\n.tabrow li:before {\r\n  left: -6px;\r\n}\r\n.tabrow li:after {\r\n  right: -6px;\r\n}\r\n.tabrow li:after, .tabrow li:before {\r\n  border: 1px solid #AAA;\r\n}<\/code><\/pre>\n<h3>Don&#8217;t be such a square<\/h3>\n<p>You can probably see where this is going. Let&#8217;s remove the borders we don&#8217;t want and add some rounded corners.<\/p>\n<div id=\"example-6\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code class=\"language-css\">.tabrow li {\r\n  border-top-left-radius: 6px;\r\n  border-top-right-radius: 6px;\r\n}\r\n.tabrow li:before {\r\n  border-bottom-right-radius: 6px;\r\n  border-width: 0 1px 1px 0;\r\n}\r\n.tabrow li:after {\r\n  border-bottom-left-radius: 6px;\r\n  border-width: 0 0 1px 1px;\r\n}<\/code><\/pre>\n<h3>Cutting corners<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/article-illustration-2.png?resize=200%2C104\" alt=\"\" width=\"200\" height=\"104\" class=\"alignright size-full wp-image-15952\" data-recalc-dims=\"1\"><\/p>\n<p>There&#8217;s something not quite right about this result. Let&#8217;s look at it up close. As you can see both the original straight corner as well as the rounded corner are visible. We need to somehow get rid of the straight corner. To do that, we will cover it up with a shadow. To illustrate what&#8217;s going on, let&#8217;s make the shadow stand out a little bit.<\/p>\n<div id=\"example-7\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code class=\"language-css\">.tabrow li:before {\r\n  box-shadow: 2px 2px 0 red;\r\n}\r\n.tabrow li:after {\r\n  box-shadow: -2px 2px 0 red;\r\n}<\/code><\/pre>\n<h3>Almost there<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/article-illustration-3.png?resize=200%2C104\" alt=\"\" width=\"200\" height=\"104\" class=\"alignright size-full wp-image-15953\" data-recalc-dims=\"1\"><\/p>\n<p>As you can see, the red shadows completely cover up the square corners we would like to hide. If we give the shadow the correct colors the illusion is complete.<\/p>\n<div id=\"example-8\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code class=\"language-css\">.tabrow li:before {\r\n  box-shadow: 2px 2px 0 #ECECEC;\r\n}\r\n.tabrow li:after {\r\n  box-shadow: -2px 2px 0 #ECECEC;\r\n}\r\n.tabrow li.selected:before {\r\n  box-shadow: 2px 2px 0 #FFF;\r\n}\r\n.tabrow li.selected:after {\r\n  box-shadow: -2px 2px 0 #FFF;\r\n}<\/code><\/pre>\n<h3>Pieces of flair<\/h3>\n<p>All that&#8217;s left to do now is adding a sprinkling of gradients and shadows to spice it up just a little bit.<\/p>\n<div id=\"example-9\" class=\"example\">\n<ul class=\"tabrow\">\n<li>Lorem<\/li>\n<li>Ipsum<\/li>\n<li class=\"selected\">Sit amet<\/li>\n<li>Consectetur adipisicing<\/li>\n<\/ul>\n<\/div>\n<pre rel=\"CSS\"><code class=\"language-css\">.tabrow li {\r\n  background: linear-gradient(to bottom, #ECECEC 50%, #D1D1D1 100%);\r\n  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;\r\n  text-shadow: 0 1px #FFF;\r\n  margin: 0 -5px;\r\n  padding: 0 20px;\r\n}<\/code><\/pre>\n<p>If you&#8217;re wondering about browser compatibility, it&#8217;s exactly as you&#8217;d expect: everything but IE. It&#8217;s very possible that it&#8217;ll work in IE10, but I haven&#8217;t had the chance to test with a preview release. Since IE8 and IE9 do support <code>:before<\/code> and <code>:after<\/code> but not <code>border-radius<\/code> you&#8217;ll have to create a <a href=\"https:\/\/css-tricks.com\/how-to-create-an-ie-only-stylesheet\/\">separate stylesheet<\/a> for them if you want to give their users a nice visual experience.<\/p>\n<p><a class=\"button\" href=\"https:\/\/css-tricks.com\/examples\/RoundOutTabs2\/\">View Demo<\/a> &nbsp; <a class=\"button\" href=\"https:\/\/css-tricks.com\/examples\/RoundOutTabs2.zip\">Download Files<\/a><\/p>\n<p><strong>Editor&#8217;s note:<\/strong> I added anchor links inside the tabs in the demo since I think it&#8217;s the most likely case that tabbed navigation like this have them. Most likely, they would have an <code>href<\/code> attribute that would link to the content they go with by <code>id<\/code>, and that behavior would be controlled by JavaScript. The fact that this tutorial doesn&#8217;t need the anchor links for the extra pseudo elements is further testament to it being better than my original.<\/p>\n<p><strong>Update:<\/strong> <a href=\"http:\/\/cosairus.com\" rel=\"noopener\">Allan Watkins<\/a> sent me a variation of these that point downwards:<\/p>\n<p data-height=\"354\" style=\"height: 354px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"JozNqX\" data-default-tab=\"result\" data-user=\"chriscoyier\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/JozNqX\/\" rel=\"noopener\">Round Out Tabs that Point Down<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A good-looking tab control usually has one feature that I&#8217;ve always found impossible to reproduce without images: borders that bend to the <em>outside<\/em> at the bottom of each tab. In this article I would like to show how you can use the CSS <code>:before<\/code> and <code>:after<\/code> pseudo elements to create this effect without using images.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4,20],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":14001,"url":"https:\/\/css-tricks.com\/tabs-with-round-out-borders\/","url_meta":{"origin":15939,"position":0},"title":"Tabs with Round Out Borders","date":"September 4, 2011","format":false,"excerpt":"A technique for a rounded tabs where the top corners are rounded, but also the bottom corners are rounded where they attach to the content area. \"Round out\" or \"flared\" borders, if you will.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.071.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":366252,"url":"https:\/\/css-tricks.com\/conditionally-styling-selected-elements-in-a-grid-container\/","url_meta":{"origin":15939,"position":1},"title":"Conditionally Styling Selected Elements in a Grid Container","date":"June 15, 2022","format":false,"excerpt":"Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square lattices). You know, even those security checks that ask you to select all images with crosswalks or whatever. \ud83e\uddd0 I found a neat way to display selectable options in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1200%2C877&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":8183,"url":"https:\/\/css-tricks.com\/body-borders-without-markup\/","url_meta":{"origin":15939,"position":2},"title":"Body Borders without Markup","date":"December 21, 2010","format":false,"excerpt":"Harry Roberts\u200a with a nice technique on using pseudo elements to create the body border effect without extraneous markup (same idea with extra markup gets you older browser support). Read the comments for some other good suggestions.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326412,"url":"https:\/\/css-tricks.com\/how-to-add-text-in-borders-using-basic-html-elements\/","url_meta":{"origin":15939,"position":3},"title":"How to Add Text in Borders Using Basic HTML Elements","date":"December 1, 2020","format":false,"excerpt":"Some HTML elements come with preset designs, like the inconveniently small squares of <input type=\"checkbox\"> elements, the limited-color bars of <meter> elements, and the \u201csomething about them bothers me\u201d arrows of the <details> elements. We can style them to match the modern aesthetics of our websites while making use of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/border-text-fieldset-legend.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1654,"url":"https:\/\/css-tricks.com\/upward-growing-tabs\/","url_meta":{"origin":15939,"position":4},"title":"Creating Tabs That Behave","date":"December 1, 2008","format":false,"excerpt":"When creating navigational tabs that use real web text, some positioning issues may arise when that text is resized. The natural flow of a web page when text is resized is to push down. This can push your main content area down and\/or force the tabs into that area. Using\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/badtabs.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362018,"url":"https:\/\/css-tricks.com\/css-borders-using-masks\/","url_meta":{"origin":15939,"position":5},"title":"Fancy\u00a0CSS Borders Using Masks\u00a0(Zig-Zag,\u00a0Wavy, and More)","date":"January 26, 2022","format":false,"excerpt":"Have you ever tried to make CSS borders in a repeating zig-zag pattern? Like where a colored section of a website ends and another differently colored section begins \u2014 not with a straight line, but angled zig zags, rounded humps, or waves. There are a number of ways you could\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fancy-borders.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15939"}],"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=15939"}],"version-history":[{"count":23,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15939\/revisions"}],"predecessor-version":[{"id":199177,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15939\/revisions\/199177"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=15939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=15939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=15939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}