CODEWITHSUNDEEP
cssrounded-corners
Bruno Gaspar
Bruno Gaspar

Reputation: 35

CSS Rounded corners in Tabs little issue

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

Upvotes: 0

Views: 775

Answers (2)

daniero
daniero

Reputation: 335

Here: http://jsfiddle.net/2CVNj/ Added a new div around the tabs to use the overflow: auto solution to clear the floats, and then moved the border on top of the content and fiddled with some z-indexes. Works nicely.

Upvotes: 1

Raekye
Raekye

Reputation: 5131

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
}

Upvotes: 2

Related Questions