Question

I have this code http://jsfiddle.net/Kbzgd/ what i’m trying to do is on the top right corner it have the rounded effect aswell…

But if i remove the border-bottom and add that border to the content like border-top, the active tab gets that border on the bottom, and i don’t want that =\

I want it like this but with the rounded corner on the top right corner, is possible ?

Thanks

Answer 1

Try border-top-right-radius: 5px on .tab_content_container

After a little more fiddling I added this:

border-top-right-radius: 6px;
border-top: 1px solid #CCC;
position: relative;
top: -1px;
z-index: -10;

So the right corner looks a little nicer. An alternative is to use box-shadow: 0 -1px 0 0 #CCC (shadow above div) instead of the border-top and top values.

Edit: After some more editing I got rid of little bit sticking out (you’ll see if you look carefully with the above couple examples).

All you have to do is remove the border on the ul (the border/shadow from the div works fine, as long as you set its z-index behind the ul). Note that when you move the border it shifts a bit, so you could set position: relative; top: 1px; back on the ul.

I gave multiple options because I don’t know if anything will conflict with the rest of your code.

Here’s my final CSS:

ul.tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0); /*this is an alternative which sets the border to be transparent*/
    float: left; 
    height: 29px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%;
}

.tab_content_container {
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #ccc; border-top: none;
    clear: both; 
    float: left; 
    width: 100%; 
    border-top-right-radius: 6px;
    /*border-top: 1px solid #CCC;
    /*top: -1px; again some alternatives*/
    position: relative;
    z-index: -10;
    box-shadow: 0 -1px 0 0 #CCC
}