Preventing "double" borders in CSS

Question

Say I have two divs next to each other (take https://chrome.google.com/webstore/category/home as reference) with a border.

Is there a way (preferably a CSS trick) to prevent my divs from appearing like having a double border? Have a look at this image to better understand what I mean:

"Double" border

You can see that where the two divs meet, it appears like they have a double border.

no, I am using this with isotope so can't use a table. divs have different sizes — john smith, Oct 02 '12 at 14:23
Is it only an issue for you left-right, or do you also need to worry about it top-bottom? — VictorKilo, Oct 02 '12 at 15:18

score 111 · Answer 1 · edited Mar 26 '17 at 14:18

111

If we're talking about elements that cannot be guaranteed to appear in any particular order (maybe 3 elements in one row, followed by a row with 2 elements, etc.), you want something that can be placed on every element in the collection. This solution should cover that:

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

Note that outline doesn't work in older browsers (IE7 and earlier).

Alternately, you can stick with the borders and use negative margins:

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

edited Mar 26 '17 at 14:18

Zachary Dahan

1,419
16
26

answered Oct 02 '12 at 15:14

cimmanon

67,211
17
165
171

1

Thank you for sharing this. I literally was working on this for hours, going down the border (instead of outline) path. This worked beautifully! – Jessy Houle Sep 02 '13 at 04:15
This is a really clever technique. Cheers! – da5id Nov 29 '13 at 20:41
2

Very usefull. I add also `position: relative;left: 1px;`, to revert negative margin. – Bartosz Walicki Aug 06 '15 at 10:51
1

This is really smart!. I think this should be the answer. – Rejoy Nov 03 '15 at 21:57
This is way better than the answer – CH4B Feb 07 '20 at 19:41
Thank you! Smart solution which does exactly what I was looking for. Should be best answer. – codeNinja7 Dec 08 '20 at 16:17

score 29 · Accepted Answer · answered Oct 02 '12 at 14:21

29

#divNumberOne { border-right: 0; }

answered Oct 02 '12 at 14:21

Andy

14,427
3
52
76

21

This is the only real way of doing it that doesn't mess other stuff up. If you need to do multiple elements, hell, say 100 divs, you could do `div { border-right: none; } div:last-child { border-right: 1px solid black; }` which would give you the intended effect – Andy Oct 02 '12 at 14:24
1

yea, it can always be done that way, but i was wondering if there was a pure-css way of doing it, without having to use more than one class (i will have more rows and columns) – john smith Oct 02 '12 at 14:27
3

This is pure css, I used a pseudo class (last child) so I haven't modified the html in anyway, there are many pseudo classes and I would say go down this route as I don't think there is an alternative – Andy Oct 02 '12 at 14:28
Look into Nth Child you can do it this way using odd and even or depending on your layout you can calculate it the way you want. – MaxwellLynn Feb 02 '14 at 17:50
1

Why was this accepted as the correct answer? I really don't think this is what he was looking for. This is certainly not a scalable solution either. – Kevin Behan Nov 12 '16 at 01:22

score 24 · Answer 3 · edited Oct 02 '12 at 14:34

24

HTML:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS:

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

Demo

Include ie9.js for IE8 support (it's very useful for all CSS selectors/pseudo-elements).

edited Oct 02 '12 at 14:34

Ry-

218,210
55
464
476

answered Oct 02 '12 at 14:27

Giona

20,734
4
56
68

if you have more than one row first div in second row have no left border and with this trick divs alignment go to left for 1px – Afshin Oct 02 '12 at 15:08
Wasn't there no more complicated version? What about elements with a larger `right-margin`? – feeela Oct 02 '12 at 15:11
@afshin if i don't see his layout how can i give a specific answer? – Giona Oct 02 '12 at 15:11
@feeela i think it's pretty basic. Anyway, `right-margin` doesn't affect `left-margin`: http://jsfiddle.net/gionaf/D6tHK/1/ – Giona Oct 02 '12 at 15:13
1

This solves the lateral double borders, but not the vertical ; borders in the bottom/top are still doubled. Any hints for those ? – delphirules Oct 23 '15 at 12:40

Stephan · Answer 4 · 2017-03-16T16:20:00.257

23

Another solution one might consider is using the CSS Adjacent sibling selector.

The CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

edited Mar 16 '17 at 16:20

answered Sep 17 '14 at 00:40

Stephan

360
3
9

Nice trick, thanks! I found I got better results using `border-left: none;` otherwise I have a small gap at the top left of the div!? (Firefox). – IanB Dec 22 '16 at 02:25
You may want to use `div + div { border-left: 0; }` – Sergey Stadnik Mar 16 '17 at 04:52

Michael Giovanni Pumo · Answer 5 · 2020-10-07T21:16:41.793

18

I'm late to the show but try using the outline property, like so:

.item {
  outline: 1px solid black;
}

Outlines in CSS do not occupy physical space and will therefore overlap to prevent a double border.

edited Oct 07 '20 at 21:16

answered Sep 26 '19 at 15:16

Michael Giovanni Pumo

14,338
18
91
140

1

also works, when a row breaks into more rows on smaller screens - all the other answers don`t work when your divs could break into new rows. you then have at least one div with a side without a border. thx for sharing - upvoted – DigitalJedi May 03 '20 at 12:24
Much better to have a solution than a hack. Thank you. – forrest Sep 23 '20 at 20:49
6

didn't work for me. Still got the double border and a possible bug. you could see the outline above my scrollbar, which does not happen with border. – Jesper Jul 13 '22 at 07:49

score 7 · Answer 6 · answered Sep 30 '17 at 11:38

You can use odd selector to achieve this

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

wouldn't it be better to do nth-child(even){border-left:none;} ? That way there could be an odd number of columns... — pixelearth, Nov 18 '18 at 21:46

score 5 · Answer 7 · answered Oct 02 '12 at 14:28

5

If the divs all have the same class name:

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

There's a JSFiddle demo here.

answered Oct 02 '12 at 14:28

Roddy of the Frozen Peas

14,380
9
49
99

+1 One of the few pseudo classes, that are recognized by IE 7+8… – feeela Oct 02 '12 at 15:09
It's not good if yours DIV are on 2 rows : you have a double border between the 2 rows.. – Didier68 Dec 07 '16 at 13:24
@Didier68 That wasn't the question, though. – Roddy of the Frozen Peas Dec 07 '16 at 13:33
The question is "preventing double borders"... but without specifying whether it is laterally or vertically ... Your solution is good for for example, but not for DIVs. I give the same remark to Stephan bellow! – Didier68 Dec 07 '16 at 13:42
I have no idea what you're talking about. The question is about div's, the answer is about div's, the fiddle uses div's. Where are you getting td's from? – Roddy of the Frozen Peas Dec 07 '16 at 13:58
look at @cimmanon answer... It's the only good answer, which fit to the question... – Didier68 Dec 07 '16 at 14:50

score 2 · Answer 8 · answered Oct 02 '12 at 14:21

2

Add the following CSS to the div on the right:

position: relative;
left: -1px; /* your border-width times -1 */

Or just remove one of the borders.

answered Oct 02 '12 at 14:21

bfavaretto

71,580
16
111
150

score 2 · Answer 9 · answered Apr 23 '19 at 10:44

Using Flexbox it was necessary to add a second child container to properly get the outlines to overlap one another...

<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

SCSS

.grid__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}

.grid__item {
    flex: 0 1 25%; // grid of 4
    margin: 0 0 1px; // margin-bottom to prevent double lines
}

.grid__item-outline {
    margin: 0 0 0 1px; // margin-left to prevent double lines
    outline: 1px solid #dedede;
}

Max · Answer 10 · 2021-02-24T18:03:32.460

If you also need to change border colors on interaction (eg. swatch selector in a form), I found out a nice trick to do it, using a combination of negative margins, padding adjustment and transform translate. Check it out:

.parent{
  display: flex;
  width: 100%;
  max-width: 375px;
  margin-left:1px;
}

.child {
  margin-left: -1px;/* hide double borders behind their siblings */ 
  flex: 1 0 auto;
}

.child input {
  display:none
}

.child label {
  display:block;
  border: 1px solid #eaeaea;
  min-height: 45px;
  line-height: 45px;
  cursor: pointer;
  padding: 0 10px; /* will be changed when input is checked */
  font-size: 15px;
  text-align: center;
}

.child input:checked+label {
  border: 1px solid red;
  transform: translateX(-1px);
  padding-left: 11px;
  padding-right: 9px;
  background-color: #fafafa;
}

<div class="parent">
  <div class="child">
    <input id="swatch-1" type="radio" value="1" name="option" checked="true">
    <label for="swatch-1">Element 1</label>
   </div>
   <div class="child">
    <input id="swatch-2" type="radio" value="2" name="option">
    <label for="swatch-2">Element 2</label>
   </div>
   <div class="child">
    <input id="swatch-3" type="radio" value="3" name="option">
    <label for="swatch-3">Element 3</label>
   </div>
 </div>

score 1 · Answer 11 · answered Sep 14 '16 at 10:37

1

I just use

border-collapse: collapse;

in the parent element

answered Sep 14 '16 at 10:37

JayCee

19
1

score 1 · Answer 12 · answered Mar 08 '17 at 06:31

My use case was for boxes in a single row where I knew what the last element would be.

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

score 1 · Answer 13 · answered Sep 27 '21 at 09:26

1

To add to a 9 year old question, another clean and responsive way to achieve this is to:

Add a border-left and border-top to the parent
Add border-right and border-bottom to each of the children

answered Sep 27 '21 at 09:26

Jasper

560
4
15

Afshin · Answer 14 · 2012-10-02T15:02:00.887

0

  <div class="one"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>

CSS:

  .one{
    width:100px;
    height:100px;
    border:thin red solid;
    float:left;
  }
.two{
    width:100px;
    height:100px;
    border-style: solid solid solid none;

    border-color:red;
    border-width:1px;
    float:left;
}

jsFiddle

edited Oct 02 '12 at 15:02

answered Oct 02 '12 at 14:28

Afshin

4,197
3
25
34

score 0 · Answer 15 · answered May 25 '17 at 11:36

I know this is a late reaction, but I just wanted to drop my 2 cents worth, since my way of doing it is not in here.

You see, I really don't like playing with margins, especially negative margins. Every browser seems to handle these just that tad bit different and margins are easily influenced by a lot of situations.

My way of making sure I have a nice table with divs, is creating a good html structure first, then apply the css.

Example of how I do it:

 <div class="tableWrap">
   <div class="tableRow tableHeaders">
     <div class="tableCell first">header1</div>
     <div class="tableCell">header2</div>
     <div class="tableCell">header3</div>
     <div class="tableCell last">header4</div>
   </div>
   <div class="tableRow">
     <div class="tableCell first">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell last">stuff</div>
   </div>
</div>

Now, for the css, I simply use the rows structure to make sure the borders are only where they need to be, causing no margins;

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

Et voila, a perfect table. Now, obviously this would cause your DIVs to have 1px differences in widths (specifically the first one), but for me, that has never created any issue of any kind. If it does in your situation, I guess you'd be more dependant on margins then.

estinamir · Answer 16 · 2019-10-16T20:08:33.977

0

I was able to achieve it using this code:

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

edited Oct 16 '19 at 20:08

answered Oct 16 '19 at 19:53

estinamir

435
5
11

score 0 · Answer 17 · answered Aug 28 '20 at 09:39

A very old question, but it was the first google result, so for anyone that comes across this and doesn't want to have media queries to re-add the border to the right/left of the element on mobile etc.

The solution I use is:

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

This works because you'll see a 2px border around the element made of the border and the shadow. However, where the elements meet, the shadow overlaps which keeps it 2px wide;

score -1 · Answer 18 · answered Oct 02 '12 at 14:30

What about giving a margin:1px; around your div.

<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
    <div class="brd"></div>
    <div class="brd"></div>
    <div class="brd"></div>
</body>
</html>

DEMO

score -3 · Answer 19 · answered Oct 02 '12 at 14:40

-3

I prefer to use another div behind them as background and delete all the borders. You need just to calculate the size of the background div and the position of the foreground divs.

answered Oct 02 '12 at 14:40

well7m

21
3

I do think my solution is the best although the critics. It's the same principe as drawing a 1px table : – well7m Oct 03 '12 at 07:09

Preventing "double" borders in CSS

19 Answers19

The CSS

jsFiddle

Linked

Related