Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Last child border not showing

Last child border not showing

Problem

I am using the selectors first-child and last-child to apply rounded corners to an unordered list.

The problem I am encountering is that the right hand Border of the last list item is not showing.

I define the borders like so:

border: 1px solid hotpink;
border-right: 0;

Setting the right hand border to 0 to prevent a double bordering, then in the last-child I give the border-right a width of one.

But this is leaving me without a right-hand border on the last child and I am unsure why, as you can see below:

problem example

Here's my entire CSS and a JSFiddle:

ul, li {
    margin: 0;
    padding: 0;
}

.menu {
    width: 90%;
    margin: 0 auto;
    height: 30px;
    list-style: none;
}

.menu li {
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid hotpink;
    border-right: 0;
    padding: 0 0.5em;
}

.menu li:first-child {
    border-top-left-radius: 5px;
}

.menu li:last-child {
    border-top-right-radius: 5px;
    border-right: 1px;
}

http://jsfiddle.net/QFvr6/

Problem courtesy of: Lerp

Solution

Instead of using border-right: 0; you should use border-right-width: 0; and for the :last-child selector, you need to use

.menu li:last-child {
    border-top-right-radius: 5px;
    border-right-width: 1px;
}

Demo

The issue is that when you use border-right: 0; it will reset the size, type and the color as well, so even if you use border-right-width: 1px; only, it won't work, so you need to use border-right-width: 0; for the .menu li as well.

Solution courtesy of: Mr. Alien

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Last child border not showing

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×