Preventing "Double" Borders in CSS

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.

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

See this Working Fiddle

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>

prevent double border on grid

You can move by 1px all input top & left, this will make borders collapse on each other.

Then add a padding of 1px to the container.

This will be the result.

.crossword-board-container {  position: relative;  background: #fff;}
.crossword-board {  background: transparent;  display: grid;  grid-template: repeat(5, 4em) / repeat(5, 4em);  list-style-type: none;  padding: 1px;  margin: 0 auto;}
.crossword-board input {  margin: -1px 0 0 -1px;  border: 1px solid red;  background: transparent;  text-align: center;  font-size: 20px;  font-weight: bold;  text-transform: uppercase;}

<div class="crossword-board-container">
  <div class="crossword-board">    <!-- ROW 1 -->    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>
    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" /> <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />

    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>
    <span></span>    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>    <span></span>
    <span></span>    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />
    <input type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" />    <span></span>
  </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>