Need border around icon using flex - html

Question

I'm working with borders here I want to add the border to the icon as shown in the image. so far I did this can anyone suggest me point me in the right direction
.list {
display: flex;
flex-direction: row;
width: 182px;
background: aliceblue;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
}
li {
width: 20px;
padding: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
i.fa {
padding: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
</ul>
</div>

Answer 1

I would either use .nth-child pseudo-class of the icons to put specific borders on each one, or better yet (in my opinion) put a class on each one based on the borders it needs (.border-right, .border-bottom etc.). This makes your html a little more descriptive in terms of indicating what the class should do to the element.
The advantage of the .nth-child method is you can rearrange the elements without changing their classes and still achieve the same results. You will have to write a little more css but it's pretty straightforward stuff so that's not a real concern.

Answer 2

If and only if the number of icon in a single row(3) is fixed.
.list {
display: flex;
flex-direction: row;
width: 182px;
background: aliceblue;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
}
li {
width: 20px;
padding: 10px;
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
li:nth-child(3n+3) {
border-right: 0;
}
i.fa {
padding: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
</ul>
</div>

Answer 3

Making use of solid colour and negative margins you can achieve that easily. please have a look at the below working snippet, hope it help :)
.list {
display: flex;
flex-direction: row;
width: 182px;
background: aliceblue;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
}
li {
width: 20px;
padding: 10px;
border: 1px solid #ccc;
margin: -1px -1px 0 0;
}
i.fa {
padding: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
</ul>
</div>
above answer was my personal opinion to have a better ui design, in order to achieve the result as per the screenshot you can do that by using table tag and few lines of css as shown in the below code snippet. it has it's own catch of having rows, which you need to control :)
table {
border-collapse: collapse;
border-style: hidden;
}
table td {
border-width: 1px;
border-style: inset;
border-color:#ccc;
padding: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<table>
<tr>
<td><i class="fa fa-facebook" aria-hidden="true"></i></td>
<td><i class="fa fa-twitter" aria-hidden="true"></i></td>
<td><i class="fa fa-pinterest-p" aria-hidden="true"></i></td>
</tr>
<tr>
<td><i class="fa fa-dribbble" aria-hidden="true"></i></td>
<td><i class="fa fa-google-plus" aria-hidden="true"></i></td>
<td><i class="fa fa-whatsapp" aria-hidden="true"></i></td>
</tr>
<tr>
<td><i class="fa fa-github" aria-hidden="true"></i></td>
</tr>
</table>

Answer 4

Please try following code. also you can add more icon looking good design
.list {
display: flex;
flex-direction: row;
width: 182px;
background: aliceblue;
}
ul {
padding: 0;
margin: 0 0 40px 0;
overflow: hidden;
width: 100%;
flex-wrap: wrap;
display: flex;
}
li {
width: 33.33%;
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 33.33%;
max-width: 33.33%;
display: inline-block;
text-align: center;
border-bottom: 1px solid #000;
margin-bottom: -1px;
padding: 10px;
border-left: 1px solid #000;
margin-bottom: -1px;
}
li:nth-child(3n-5) {
border-left: none;
}
li:nth-child(n+2) {
border-right: none;
}
i.fa {
padding: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
</ul>
</div>

Answer 5

Here is an idea using pseudo element and one border. You add border-right to only the first and second element of each row and for each first element starting from the second row you add a whole line on the top that will cover the row.
.list {
display: inline-flex;
margin:5px;
flex-direction: row;
width: 182px;
background: aliceblue;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
}
li {
width: 20px;
padding: 10px;
position:relative; /*Don't forget this*/
}
/*The magic starts here */
li:not(:nth-child(3n + 3)) {
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
li:nth-child(3n + 4):before {
content:"";
position:absolute;
top:0;
left:0;
width:120px;
height:1px;
background:rgba(0, 0, 0, 0.2);
}
/**/
i.fa {
padding: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
</ul>
</div>
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
</ul>
</div>
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
</ul>
</div>
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
</ul>
</div>
<div class="list">
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-github" aria-hidden="true"></i></li>
</ul>
</div>

Answer 6

By the way you are doing this, I think the easiest solution for you would be to target specifically the 5th and 6th child elements. You can do this with the nth-child(n) css selector - so li:nth-child(5) to target the G+ icon box for example, and then just add the style for a bottom border. More information: https://www.w3schools.com/CSSref/sel_nth-child.asp