CODEWITHSUNDEEP
htmlcss
user800372
user800372

Reputation:

Remove last li border

I am not very pr in css How do i remove border-bottom from only the last li element in css.

ul li{
   border-bottom: 1px solid blue;
}

Upvotes: 2

Views: 4835

Answers (5)

Kamran
Kamran

Reputation: 2741

ul li:last-child {
  border-bottom: none;
}

Upvotes: 2

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

you can also use + Adjacent sibling for adding border

ul li+li {
  border-top: 1px solid blue;
}
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

Upvotes: 1

Talal Emran
Talal Emran

Reputation: 13

Use the following code:

ul li:last-child { border-bottom: none; }

Cheers :)

Upvotes: 1

user4778779
user4778779

Reputation:

Please go thru this link and see if this could help Remove right border off of the last Child div through CSS

Also 

ul li:last-child {
  border-bottom: none;
}

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99484

You could use :last-child pseudo-class:

ul li:last-child {
   border-bottom: 0;
}

This only works in IE9+. As a workaround, you could give top border to the list items and override the value for the :first-child:

ul li {
   border-top: 1px solid blue;
}

ul li:first-child {
   border-top: 0;
}

Upvotes: 4

Related Questions