Tab Borders



  • Hello,

    I am trying to add a 1px border on the left and right side of tabs. I tried playing around with some of the selectors, but nothing so far has worked. I'd guess I have the wrong selectors. Does anyone happen to know what I should be looking for?

    What I currently have is this:

    .tab-position .tab {
    	transform: skewX(-25deg);
    	border-right: 1px grey !important;
    }
    .tab-position .tab .tab-header {
    	transform: skewX(25deg);
    	border-left: 1px grey !important;
    }
    

    Have also played with border-left and border-right to no avail. The skew works perfectly, though.



  • Try with border-left: 1px solid gray



  • This works:

     .tabs-top .tab-position {
    	transform: skewX(-25deg);
    	border-right: 1px solid gray;
    	border-left: 1px solid gray;
    }
    .tabs-top .tab-position .tab-header {
    	transform: skewX(25deg);
    }
    
    


  • @luetage said in Tab Borders:

    Try with border-left: 1px solid gray

    Oh duh, I forgot the solid keyword. That helps.

    That just leaves figuring out a way to add a border to either the first tab (left border) or last tab (right border), to avoid all the middle ones having a double-thickness border. Do the tabs have any sort of nth-child selectors?



  • @erufael said in Tab Borders:

    Do the tabs have any sort of nth-child selectors?

    Yes they do!

    Final version of code: See the post by @luetage below.

    .tab-position .tab {
    	transform: skewX(-25deg);
    	border-left: 1px solid grey;
    }
    .tab-position .tab:nth-last-child(1) {
    	border-right: 1px solid grey;
    }
    .tab-position .tab .tab-header {
    	transform: skewX(25deg);
    }
    

    This will produce this (using a modified theme for colors):

    Thanks, @luetage!



  • @erufael Your code doesn't work. If you use your operating systems zoom you will see that you still got double borders. Just move a middle tab around while zoomed in and you will notice.

    .tabs-top .tab-position {
    	transform: skewX(-25deg);
    	border-right: 1px solid gray;
    }
    .tabs-top span:first-of-type .tab-position {
    	border-left: 1px solid gray;
    }
    .tabs-top .tab-position .tab-header {
    	transform: skewX(25deg);
    }
    

    This should do the trick.



  • I haven't tested this but using :first-of-type or :last-of-type to the selector usually works.

    One example

    .tabs-top .tab-position {
        border-left: 1px solid gray;
    }
    
    .tabs-top .tab-position:last-of-type {
        border-right: 1px solid gray;
    }
    

    Or you can do it the other way around



  • @luetage ...I just noticed this, actually, and came back here to mention the issue. Good timing! lol

    This does indeed do the trick. Thanks again for the help! Is there a way to see what selectors are available, or a way to inspect them, as in webpages?





  • @luetage Perfect, thanks!


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.