Grow your CSS skills. Land your dream job.

help with borders

  • # June 4, 2012 at 8:24 pm

    I have some tabs. I am trying to get a 1px border around the tabs. But where the tabs touch, they make a 2px border. I am trying to figure out how to fix that. I got part of the way there with first-child and last-child but it messed it up. It’s the left and right borders I am trying to get right, the left border needs to be one pixel, but not where it touches tab 2 or tab 3, but then the last tab needs to have a right border to end it. Can you take a look?

    http://jsfiddle.net/rfrWW/2/

    # June 4, 2012 at 8:38 pm

    Assign a class to the last tab to create the right border. Otherwise, left borders only.

    http://jsfiddle.net/rfrWW/7/

    # June 4, 2012 at 8:43 pm

    I guess that would work but then what happens if this turns into a wordpress theme. It would be hard to add that class to the last tab every time. I had hoped there would be a way so that if another tab was added, you wouldn’t have to add a class every time.

    # June 4, 2012 at 8:48 pm

    If you can’t add a class, then remove either left or right border and use the first-child or last-child pseudo-selectors (respectively). Not overly backwards compatible but you’re good for the part of the market that will notice/care.

    http://jsfiddle.net/rfrWW/9/

    # June 4, 2012 at 8:59 pm

    Yes, thank you. That is the fix I was looking for.

    # June 4, 2012 at 9:17 pm

    Use first-child as it has much better browser support.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".