CODEWITHSUNDEEP
htmlcss
Dravenzo
Dravenzo

Reputation: 129

How to remove a specific border with CSS

I am trying to remove the last border on the right as seen in the picture below. How would I go about in removing this?

enter image description here

My code:

#headerlinks li, a {
    display: inline-flex;
    text-decoration: none;
    color: black;
    border-right: solid 1px black;
}
  <div id="headerlinks">
        <nav>
            <ul>
                <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html -->
                <li><a href="#">Accessibility</a></li>
                <li></li><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>

Upvotes: 1

Views: 2547

Answers (4)

Antier Solutions
Antier Solutions

Reputation: 1382

You can use the "last-child" property in css, to remove border from last element. Also remove extra closing "li" element from html.

#headerlinks li,
a {
    display: inline-flex;
    text-decoration: none;
    color: black;
    border-right: solid 1px black;
}

#headerlinks li:last-child,
a {
    border-right: none;
}
<div id="headerlinks">
    <nav>
      <ul>
         <li><a href="#"> Contact us </a></li>
         <li><a href="#">Accessibility</a></li>
         <li><a href="#">Login</a></li>
      </ul>
    </nav>
</div>

Upvotes: 0

AfifeBetul
AfifeBetul

Reputation: 136

You should add style for last of li that is #headerlinks li:last-child, a

#headerlinks li, a {
    display: inline-flex;
    text-decoration: none;
    color: black;
    border-right: solid 1px black;
}
#headerlinks li:last-child, a {
    border-right: none;
}
 <div id="headerlinks">
        <nav>
            <ul>
                <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html -->
                <li><a href="#">Accessibility</a></li>
                <li></li><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>

Upvotes: 3

BOZ
BOZ

Reputation: 2020

You can use the selector. :last-child

#headerlinks li a {
    display: inline-flex;
    text-decoration: none;
    color: black;
}

#headerlinks li:not(:last-child) a {
    border-right: solid 1px black;
}
<div id="headerlinks">
        <nav>
            <ul>
                <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html -->
                <li><a href="#">Accessibility</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>

Upvotes: 0

Ammad Amir
Ammad Amir

Reputation: 518

If you want to remove border from all a tag then simply remove border-right:solid 1px black from css

#headerlinks li, a {
    display: inline-flex;
    text-decoration: none;
    color: black;
    border-right: solid 1px black;//remove this if border not req.
}
<div id="headerlinks">
        <nav>
            <ul>
                <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html -->
                <li><a href="#">Accessibility</a></li>
                <li></li><a href="#" style="border:none;">Login</a></li>
            </ul>
        </nav>
    </div>

Upvotes: 0

Related Questions