CODEWITHSUNDEEP
htmlcss
Anatoly
Anatoly

Reputation: 5243

How to avoid change in border's width when two borders are overlapping?

is it possible to make two borders overlapping without changing width of an intersected border? I know that I can just make border-top: none; for the bottom div, but I'm looking for another solution is it possible.

Thank you.

UPDATE I prefer global solution is it possible at all

This is example:

.box{
    border: solid thin;
}
<div class="box">Test></div>
<div class="box">Test1</div>

Upvotes: 1

Views: 106

Answers (4)

ajmajmajma
ajmajmajma

Reputation: 14216

You can try adding a negative margin, you may want to target the div individually with an id or something though (or a new class if you wanted it more global).

.box{
    border: solid thin;
    margin-top: -1px;
}
<div class="box">Test></div>
<div class="box">Test1</div>

As mentioned in comments, you should use px (instead of "thin") especially if you have a border size over 1px (and even if you don't for good practice), because if you change border size, you have to change the negative margin accordingly.

Upvotes: 3

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

Use + selector it will check if .box has a next sibling and remove border from it

.box {
  border: solid thin;
}
.box + .box {
  border-top: 0;
}
<div class="box">Test></div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>
<div class="box">Test1</div>

Upvotes: 0

Stickers
Stickers

Reputation: 78676

Well, this is an alternative solution since you asked for it.

.table {
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.box {
    border: solid thin;
    display: table-row;
}
<div class="table">
    <div class="box">Test</div>
    <div class="box">Test1</div>
</div>

Upvotes: 1

Zack Tanner
Zack Tanner

Reputation: 2590

I'm not sure if this constitutes as "another way," but here's a way to do it without negative margins. 

.outer-box {
  border: solid thin;
}
.box:not(:last-child) {
  border-bottom: solid thin;
}
<div class="outer-box">
  <div class="box">
    Test
  </div>
  <div class="box">
    Test 2
  </div>
</div>

Upvotes: 0

Related Questions