CODEWITHSUNDEEP
cssborder
TheDarkCode
TheDarkCode

Reputation: 411

Borders only between elements

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

enter image description here

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?

Upvotes: 13

Views: 21438

Answers (5)

David Ferreira
David Ferreira

Reputation: 1756

If you are using TailwindCSS. You can make use of the divide-x or divide-y classes that add borders only between direct children.

Example:

div class="flex flex-col divide-y">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

See docs: Divide Width - TailwindCSS

Upvotes: 0

Ondra
Ondra

Reputation: 33

You can do this:

.books-collection {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 5px 0;
}

.books-collection .book:not(:first-child) {
    border-left: 1px solid #bbb;
    padding: 5px 0;
}

Upvotes: 2

DRD
DRD

Reputation: 5813

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;
}

Upvotes: 23

slamci
slamci

Reputation: 424

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.

Upvotes: 11

user1375096
user1375096

Reputation:

add this to your style.css, turn off border-right every 4th books. (this only works on the desktop version of the site.)

.nspArt:nth-child(4n) .gkResponsive img.nspImage {
    border-right: none;
}

Upvotes: 2

Related Questions