How to Avoid Double Border from the Multiple <Li>

How to avoid double border from the multiple li

Try adding margin-right:-1px; margin-bottom:-1px;

Preventing double borders in CSS

#divNumberOne { border-right: 0; }

How to avoid double borders on list of divs

add this rule to your CSS

.faq + .faq
{
    border-top: none;
}

Explanation: .faq that comes directly after another .faq dont get a top border.

1. this is a pure CSS solution (without Script)
2. it doesnt assume anithing about the layout (the div's dont have to be last childs of a container, or at some specific index)
3. its fixes the double border issue even if their are multiple .faq one after each other.
4. its a cross browser solution.

See this Working Fiddle

How to remove double borders on stacked list items with no whitespace

you are maybe searching for negative margins then

li{
    padding: 0;
    width:100px;
    margin-right:-5px;
    margin-bottom:-1px;
}

the margin bottom:-1px places the bottom divs 1px upper, and the right margin is 4px because you have a space between every li + 1px for the margin

caution when doing that, as 4px is only the width of 1em with your specific font size, so better say -1em -1px instead of -5px

codepen version here.

Prevent double border when joining multiple html table - border-collapse not working

Just add margin-top: -1px; to your table.

table {  margin-top: -1px;}

<table style="border:1px solid black;border-collapse:collapse;width:100%">  <tr>    <td rowspan="3">Heading-1</td>    <td>Heading-2</td>    <td>Heading-3</td>  </tr>  <tr>    <td>Heading-4</td>    <td>Heading-5</td>  </tr>  <tr>    <td>Heading-6</td>    <td>Heading-7</td>  </tr></table><table style="border:1px solid black;border-collapse:collapse;width:100%">  <tr>    <td rowspan="3">Heading-1</td>    <td>Heading-2</td>    <td>Heading-3</td>  </tr>  <tr>    <td>Heading-4</td>    <td>Heading-5</td>  </tr>  <tr>    <td>Heading-6</td>    <td>Heading-7</td>  </tr></table><table style="border:1px solid black;border-collapse:collapse;width:100%">  <tr>    <td rowspan="3">Heading-1</td>    <td>Heading-2</td>    <td>Heading-3</td>  </tr>  <tr>    <td>Heading-4</td>    <td>Heading-5</td>  </tr>  <tr>    <td>Heading-6</td>    <td>Heading-7</td>  </tr></table>

Prevent double borders around side-by-side elements

Since you know how many flex items there are in each row, you can use the :nth-child() selector to apply borders to items missed by the main rule.

.wrapper {  display: flex;  flex-wrap: wrap;  width: 400px;}.container {  flex-basis: 20%;  border-top: 1px solid #000;  border-bottom: 1px solid #000;  border-right: 1px solid #000;  margin-bottom: 1px;  min-height: 100px;  display: flex;  justify-content: center;  align-items: center;}
.container:nth-child(4n + 1) { /* add border to first child in each row */  border-left: 1px solid red;}

<div class="wrapper">  <div class="container">1</div>  <div class="container">2</div>  <div class="container">3</div>  <div class="container">4</div>  <div class="container">5</div></div>
<hr>
<div class="wrapper">  <div class="container">1</div>  <div class="container">2</div>  <div class="container">3</div></div>
<hr>
<div class="wrapper">  <div class="container">1</div>  <div class="container">2</div>  <div class="container">3</div>  <div class="container">4</div>  <div class="container">5</div>  <div class="container">6</div>  <div class="container">7</div>  <div class="container">8</div>  <div class="container">9</div>  <div class="container">10</div></div>

How to prevent double border in tr td element

Start with:

border-collapse:collapse;

and then tune as necessary. Using the :first-child and :last-child pseudo selectors can be used to modify default styling on one end.

Prevent double border from responsive columns

You can use border-right/border-bottom with your element and use border-top/border-left with the container:

.cell {  border-right: 1px solid black;  border-bottom: 1px solid black;}.row {  border-top: 1px solid black;  border-left: 1px solid black;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"><div class="row no-gutters">  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div></div>

How do I remove the double border on this table?

Add the border-collapse:collapse; to the table css selector. This will eliminate that nested border look. Also, your Text:align:center; should really be text-align:center;

Fiddle: http://jsfiddle.net/GParb/1/

CSS

table{
    width:100%;
    border-collapse:collapse;
    text-align:center;
    border:1px solid #00F;
    font-size:12px;
    }

Unlike the cellspacing="0" as suggested below, this answer will collapse the borders to not be a 3D effect, just like what the OP asked for.

Comparison fiddle: http://jsfiddle.net/GParb/7/

CSS ul li: Avoiding double borders

CSS3 selectors can target :first-child or :last-child, like this:

ul {
    border: 1px solid grey;
}
li {
    border-bottom: 1px dotted grey;
}
li:last-child {
    border:none;
}

A working example: http://api.fatherstorm.com/test/4165384.php

---

Related Topics