To remove the border from the last child of an element, we can use the :last-child selector in combination with the border or its sub-properties.
If you want to remove all four sides of border from the last child you have to simply set the border property to none. OR, if you want to remove any specific side of border from the last child you have to set that side border to none. For eg. border-bottom: none;.
In the following example, we have placed a border at the bottom of every list item but removed it from the last child i.e. last list item:
Example:
ul{
list-style-type: none;
padding: 0;
}
ul li{
border-bottom: 1px solid grey;
padding: 3px;
}
li:last-child{
border-bottom: none;
}
We can also use the above approach to get rid of the double borders at the bottom of the last item.
See the following example for detail:
Example:
ul{
list-style-type: none;
padding: 0;
border: 1px solid grey;
}
ul li{
border-bottom: 1px solid grey;
padding: 3px;
}
li:last-child{
border-bottom: none;
}
