(Better) Tabs with Round Out Borders

The following is a guest post by Menno van Slooten. You might notice we've been down this road before, but I quite like Menno'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.

A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let's start with some basic markup.

Here we introduced our first :after pseudo-element. Basically, :after appends another child to an element. It's not in the DOM (which is why it's called a pseudo element), so it is not a real child but it is completely stylable, as long as you add some content, in this case a single space character.

In my opinion, the terms :before and :after are slightly confusing since the pseudo's aren't actually added before or after the element they apply to, but are inserted as children. This is also why you can't apply :before and :after to elements that can't contain children ("no content" elements), like <input>.

In this case, we use the pseudo element to create a bottom border that doesn't influence the tabs' positioning. We could have just put a bottom border on the <ul> but that would've made the next step a little trickier.

Above and beyond

Now, an essential part of a convincing looking tab control, is that the selected tab sits in front of the edge while the rest fall behind the edge. To do this, we change its bottom border and do some z-index magic.

Cutting corners

There's something not quite right about this result. Let'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's going on, let's make the shadow stand out a little bit.

If you're wondering about browser compatibility, it's exactly as you'd expect: everything but IE. It's very possible that it'll work in IE10, but I haven't had the chance to test with a preview release. Since IE8 and IE9 do support :before and :after but not border-radius you'll have to create a separate stylesheet for them if you want to give their users a nice visual experience.

Editor's note: I added anchor links inside the tabs in the demo since I think it's the most likely case that tabbed navigation like this have them. Most likely, they would have an href attribute that would link to the content they go with by id, and that behavior would be controlled by JavaScript. The fact that this tutorial doesn't need the anchor links for the extra pseudo elements is further testament to it being better than my original.

Update:Allan Watkins sent me a variation of these that point downwards:

Share On

Comments

But I have some problems. Can be because I try to use it together with
JQuery-Tabs.
If I click on a tab outside the link area, than I get optical changes, but it will
not change the tabsheet.
If I click on a tab inside the link area, than it will changed the tabsheet, but I loose the optical changes.

My team used CSS3 pie on a fairly large website, and IE7 rendering performance becomes very bad. It slows down the PC it’s on, and clicking on something takes a full second or more to change the state appearance of. Make a stand to not support IE7. There really is no choice as we’ll all do it some day. Use a JS Shim for :before and :after support if you really must. IE8 degrades okay into square corners and flat gradients – and that’s fine. IE9 gets rounded corners but no gradients. All this, really is okay. Different browsers can get different designs. Nicer browsers will reward users effort to upgrade with a nicer site. It’s a reward system we need to encourage.

I don’t think this is correct, Steve. The border-radius property works fine in IE9 with a single value. That being said, I don’t have a native install of IE9 (I have IE8 and IE10, which allows “IE9 mode”), but I used Adobe browser labs to do a quick test, and the rounded corners work fine. Also, a site like caniuse.com usually has notes on that type of partial support, and I don’t see anything there about that.

In the section of the article where Menno mentions lack of border-radius support, I think he meant lack of support for IE8, not IE9. Chris might want to correct the wording in that sentence.

The only way (I think) that someone would get the impression that IE9 didn’t support border-radius was if they were inadvertently in “IE8 mode” in their IE9 install (I’ve done this before with IE8 as IE7), or the document they were testing in was using the “IE7″ meta tag in the head.

This is such a clear, succinct explanation of something I would have expected to be more complicated. The final result is so crisp and clean, but not boring. I’ll definitely be working rounded tabs into a project sometime soon, thanks for the code AND the design idea!

That is just awesome. Have always stopped at Above and beyond step (maybe with rounded corners on the top of the tabs and a little gradient. But the finishing touches really make the difference. Cheers

Pretty! It’s not just border-radius that keeps it from working in IE8, but also box-shadow (link). Using pseudo-elements, thereby leaving IE6 and IE7 behind, is probably fine for people not targeting China now, but we’re likely to be stuck with IE8 for a while.

Your explanation is incredibly clear and concise. I can literally feel the excitement running through my veins with the possibilities for this technique! WITHOUT IMAGES!! YEW!

For so long I’ve had to deal with unnecessary markup, but this method creates such beautiful tabs without that need.

For everyone complaining about IE8 – remember that it’s not always important for a website to look exactly the same in every browser. Often I like to add these niceties for those with a capable browser and provide a “close enough” fallback.

I do think I will be adapting your step by step approach toward styling from now on. It really seems to avoid unnecessary code. Great work! An inspiration.

The shadow still shows a little in the bottom corners. Not a lot, but it’s noticeable nonetheless. Worse though is the border equals background color trick. It hides what is probably one of the hardest part of css’ing tabs and will fail when you don’t have a one-value background color.

Had to change .tabrow li to margin: 0 5px; and .tabrow li:before and :after to left: -8px;. But the corners are still showing on the little boxes between the tabs. Setting border width to 0 for top left and top right does not hide the borders for some reason. I tested this in Safari and Firefox.
Also, the end result is pretty ugly as there’s a large shadow below the tabs that makes the box shadows stand out. I could remove the shadow but then the tabs wouldn’t have that nice shadow behind them. Disappointing solution for sure!

Cant his work within a table format… instead of using the :after or :before on an <li> , using it on a <td> for instance. I briefly tried this with no luck so if someone more knowledgeable than I can answer that would be appreciated.

Chris I am a big fan of your work and this is just a master mind at work. I just wanted to know where the hell did you come up with the idea to do this with css anyone else would have done it with images but you sure are the master css

Hey Brad. You’ve just solved my problem after reading your comment regarding localhost with “e.preventDefault” enabled. I removed “e.preventDefault” and it works fine. When I’m ready to upload pages that use “(Better) Tabs with Round Out Borders”, would I need to replace “e.preventDefault?”

I don’t know Jack, Ive never got this up on the server because some other things popped up. Localhost to my knowledge should act like like on the web. I still use the tabs on my local pages, just without the js. I do note that its working for others so it is a good deal and excellent appearance.

Thanks Brad, yeh you’re right about the localhost acting like on the web. Just started using localhost, silly Q. Anyway this CSS is keeping me up till all hours, I love it, I haven’t touched a table in weeks thanks to sites like this!

Really nice Chris! Any time I’ve wanted to do nice looking nav like this with several states, I’ve used the old huge-image-sprite Apple technique, which works fine, but to get pretty damn close with no images is an achievement! Nice work!

Thanks for this amazing article. I must say your blog provides much useful information. I think this was really an interesting article. In fact I enjoyed reading this article. Keep sharing such more fascinating blog.

Thanks to both Chris Coyier and Menno van Slooten for this wonderfull piece of work. Chris your site is superb! I’m only just starting to realize and utilize the power of CSS after been stuck using tables for years. The biggest problem I’m having is alignment, but I’m getting there thanks to sites like this.

Menno van Slooten, I have bookmarked your site and I will explore it more when I do my rounds of exploring more of sites that I’ve bookmarked. :)

When i pull this test page up, the tabs are not formatted. Not of the shape is there and the tab content boxes are all messed up as well. It looks fine in Chrome, and IE8 (shape is there at least), and in IE10, but in IE9 I have to click the COMPATIBILITY VIEW button to get the tabs to “shape up” and do their thing. What could be causing that?
What do I need to put in the CSS to have the active tab (the one that is viewed when you load the page) to show as a white tab, as they look like wh4en you’ve clicked on a tab.

Do you have a tip for me to aligne it from center to left side, so it do not loose the borders on the left side (padding or margin parameters) ?

Many tanks from Germany

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.