CODEWITHSUNDEEP
css
john smith
john smith

Reputation: 2163

Preventing "double" borders in CSS

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.

Upvotes: 157

Views: 135066

Answers (21)

logi-kal
logi-kal

Reputation: 7880

In some specific cases (e.g. if you're using grids and you are guaranteed to generate an area without "holes"), you can solve in this way:

.collection {
    --border: solid 1px;
    border-top: var(--border);
    border-right: var(--border);
}

.collection .child {
    border-bottom: var(--border);
    border-left: var(--border);
}

where --border is a CSS variable.

Intuitively, for each "cell" you assign only the bottom and left borders, whereas for the container you assign the top and right borders.

Demo:

.collection {
    --border: solid 1px;
    border-top: var(--border);
    border-right: var(--border);
    display: grid;
    grid-template-areas: '. .';
}

.collection .child {
    border-bottom: var(--border);
    border-left: var(--border);
    text-align: center;
}
<div class="collection">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
    <div class="child">Child 5</div>
    <div class="child">Child 6</div>
</div>

Upvotes: 0

G&#233;ry Ogam
G&#233;ry Ogam

Reputation: 8107

The simplest solution to get uniform border width is to add a border to the parent element (of the same width as the border of the child elements):

enter image description here

* {
  box-sizing: border-box;
}

.parent {
  width: 320px;
  display: flex;
  flex-wrap: wrap;
  border: 10px solid red;
}

.child {
  width: 100px;
  border: 10px solid green;
}

<div class="parent">
  <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 class="child">9</div>
</div>

Upvotes: -1

Jasper
Jasper

Reputation: 619

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

Upvotes: 1

Max
Max

Reputation: 334

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>

Upvotes: 3

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14794

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.

Upvotes: 23

abnoas
abnoas

Reputation: 11

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;

Upvotes: 1

estinamir
estinamir

Reputation: 503

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

Upvotes: 0

ness-EE
ness-EE

Reputation: 1410

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

Upvotes: 2

yasarui
yasarui

Reputation: 6573

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>

enter image description here

Upvotes: 7

NoobishPro
NoobishPro

Reputation: 2549

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.

Upvotes: 0

cimmanon
cimmanon

Reputation: 68349

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

Upvotes: 116

Stephan
Stephan

Reputation: 389

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

Upvotes: 26

Sam Henderson
Sam Henderson

Reputation: 489

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

Upvotes: 1

JayCee
JayCee

Reputation: 29

I just use

border-collapse: collapse;

in the parent element

Upvotes: 2

Afshin
Afshin

Reputation: 4215

  <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 ​

Upvotes: 0

well7m
well7m

Reputation: 21

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.

Upvotes: -3

Giona
Giona

Reputation: 21114

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).

Upvotes: 26

defau1t
defau1t

Reputation: 10619

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

Upvotes: -1

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

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.

Upvotes: 5

bfavaretto
bfavaretto

Reputation: 71939

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.

Upvotes: 2

Andy
Andy

Reputation: 14575

#divNumberOne { border-right: 0; }

Upvotes: 31

Related Questions