CODEWITHSUNDEEP
htmlcss
Kshatra
Kshatra

Reputation: 425

Collapse vertical borders of adjacent elements?

How can I collapse vertical borders of two adjacent elements without removing border-top/border-bottom?

For ex:

<style type="text/css">
.bordered {
    border:1px solid #000000;
}
</style>
...
<body>
    <div class="bordered">bordered_1</div>
    <div class="bordered">bordered_2</div>
</body>

One way i found is to add

margin-top:-1px;
margin-bottom:-1px;

to .bordered. But this way if i change border thickness i also must change margin-top and margin-bottom. The other way is to set:

body {
    display:table;
    border-collapse:collapse;
}
.bordered {
    display:table-row;
    border:1px solid #000000;
}

It appears to have good browser compatibility(tested on IE 9, FF, Chrome), but it's a hacky sort of code. Is there a more elegant way?

Upvotes: 0

Views: 1467

Answers (1)

C3roe
C3roe

Reputation: 96456

For the limited scope of your example, you could simply specify that an element with class bordered should not have a border-top if it is preceded immediately by an element with that same class, using the adjacent sibling combinator, +:

.bordered {
    border:1px solid #000000;
}
.bordered + .bordered {
    border-top:0 none;
}
<div class="bordered">bordered_1</div>
<div class="bordered">bordered_2</div>

Upvotes: 2

Related Questions