Last child border not showing

Question

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:

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/

Answer 1

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.

Answer 2

Your rule is not complete : border-right: solid 1px; or it should be border-right-width:1px; DEMO

Answer 3

Fixed, you forgot you specified border-right cannot have border:

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