How to remove a list item border in bootstrap list group?

Problem:

The current code you are trying is a descendant selector and will only work when li is the child of .borderless like below:

<div class="borderless">
  <li></li>

Solution:

Try the below multiple class selector which selects the list items which has a class borderless.

li.borderless { border-top: 0 none; }

Output:

li.borderless {
  border-top: 0 none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="list-group">
  <li class="list-group-item borderless">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

You can take advantage of the :nth-child() Selector, so you don't need to add the borderless class.

Example:

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

The markup

.list-group li:nth-child(1){
  border-top: 0 none;
}

Cheers!

In Bootstrap 4.0 you can simply set each individually or all using the border-* class.

<ul class="list-group">
    <li class="list-group-item border-0">One</li>
    <li class="list-group-item border-top-0">Two</li>
    <li class="list-group-item border-right-0">Three</li>
    <li class="list-group-item border-bottom-0">Four</li>
    <li class="list-group-item border-left-0">Five</li>
<ul />

Bootstrap 4.0 Borders Documententation