Borders only between elements

Question

I need to know how to make a borders between my items like the following image:

I tried making it using border-right and -left but the last item shouldn't have a border-right.

My CSS:

border-top: 1px solid #000;
border-right: 1px solid #000;

How can I apply border-right to all but the last element on the row?

Answer 1

There is a better way to do it that works in older browsers: http://jsfiddle.net/mxV92/.

You simply apply a border on the left for every item that immediately follows another item:

ul > li + li {
    margin-left: 5px;
    padding-left: 5px;
    border-left: 1px solid #bbb;
}

Answer 2

If I understand correctly, what you want is to have borders on the right of all the items, except the last item.

You can use the 'last-child' selector for that. For example, if your objects were in a 'div' with the class 'foo', your CSS might look like:

div.foo {
   border-width: 1px 1px 0 0;
   border-color: #000;
   border-style: solid;
}

div.foo:last-child { border-width: 1px 0 0 0; }

This says that divs of class 'foo' should have solid black borders, with a width of 1px on top and right ('border-width' is followed by widths in the order top, right, bottom, left), except on the last item, where the width is '1px' only on the top.

':last-child' should be supported by most modern browsers.