Как убрать левую границу у пункта списка?

* { 
  padding: 0; 
  margin: 0; 
} 
 
ul { 
  display: flex; 
} 
 
li { 
  list-style: none; 
  width: 57px; 
  height: 57px; 
  background: #fce38a; 
  text-align: center; 
  line-height: 57px; 
  border-left: 1px solid #f38181; 
} 
 
li:first-of-type { 
  border-left: none; 
}

<ul> 
  <li></li> 
  <li></li> 
  <li></li> 
  <li></li> 
</ul>

*{ 
    padding: 0; 
    margin: 0; 
} 
 
ul{ 
    display: flex; 
} 
li { 
    list-style: none; 
    width: 57px; 
    height: 57px; 
    background: #fce38a; 
    text-align: center; 
    line-height: 57px;     
} 
li + li{ 
    border-left: 1px solid #f38181; 
}

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

.team__social { 
  padding: 0; 
} 
 
.team__social::before { 
  content: ''; 
  display: block; 
  clear: both; 
} 
 
.team__social-item { 
  list-style: none; 
  display: inline-block; 
  float: left; 
  width: 57px; 
  height: 57px; 
  background: #fce38a; 
  text-align: center; 
  line-height: 57px; 
  border-left: 1px solid #f38181; 
} 
 
.team__social-item:first-child { 
  border-left: 0; 
}

<ul class="team__social"> 
  <li class="team__social-item"> 
    <a href="#" class="team__social-link"> 
      <i class="fab fa-facebook-f"></i> 
    </a> 
  </li> 
  <li class="team__social-item"> 
    <a href="#" class="team__social-link"> 
      <i class="fab fa-twitter"></i> 
    </a> 
  </li> 
  <li class="team__social-item"> 
    <a href="#" class="team__social-link"> 
      <i class="fab fa-pinterest-p"></i> 
    </a> 
  </li> 
  <li class="team__social-item"> 
    <a href="#" class="team__social-link"> 
      <i class="fab fa-instagram"></i> 
    </a> 
  </li> 
</ul>