Handle 1-pixel border to avoid double edge (1 + 1 pixel) with side-by-side elements

Navigation
8

I have a grid created with a ul list whose inner elements at li contains a border. The idea is that when the elements are side by side the edges are manipulated so that there is only a single trace with 1 pixel instead of what happens:

Example in JSFiddle

Problem

Sincethelistmustbe100%wideintheareawhereitisinsertedanditslielementsmustbe25%ofthewidthofthelist,thegrayborderisappliedtothealinkwithineachlisoastoavoidthatthe25%widthplusthe2pixelsthattheborder(1pxrightborder+1pxleftborder)occupybreakthelayout:

HTML

<ul> <li> <a href="#" title="">1</a> </li> <li> <a href="#" title="">2</a> </li> <li> <a href="#" title="">3</a> </li> <li> <a href="#" title="">4</a> </li> <li> <a href="#" title="">5</a> </li> <li> <a href="#" title="">6</a> </li> <li> <a href="#" title="">7</a> </li> <li> <a href="#" title="">8</a> </li> </ul>

CSS 

ul, li, a{
    display:block;
    margin:0;
    padding:0;
}
ul{
    width:100%;
}
li{
    float:left;
    width:25%;
}
a{
    border:1px solid #c9c7c7;
    text-align:center;
    height:200px;
}

Question

How do I make the final gray border look like this?

    
asked by anonymous 13.01.2014 / 18:55

2 answers

8

With certain CSS3 rules you can only affect some of the borders to achieve the desired result: 

/* apaga todas as bordas direitas e inferiores */
li a { 
    border-right-color: transparent; 
    border-bottom-color: transparent;
}
/* mostra borda direita a cada 4 itens */
li:nth-child(4n) a { border-right-color: #c9c7c7; }
}
/* mostra borda inferior nos últimos 4 itens */
li:nth-last-child(-n+4) a { border-bottom-color: #c9c7c7; }

link

Workaround to solve the 1px gap 

li a { 
    border-right-color: transparent;
    border-bottom-width: 0;
}
li:nth-child(4n) a { border-right-color: #c9c7c7; }
li:nth-last-child(-n+4) a { border-bottom-width: 1px; }

link

Support

13.01.2014 / 19:07
1

The simplest way to do this is by using box-sizing and concentrated edges in both UL and LIs. See: 

ul, li { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  width: 100%;
  overflow: hidden;
}

ul li {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  width: 25%;
  float: left;
}
    
28.01.2014 / 20:02
How do the Outline of the buttons follow the curvature of the elements? How to get the current year in ORACLE?