Возможно ли схлопнуть бордер?
<div class="list">
<div class="item">Lorem ipsum.</div>
<div class="item">Lorem ipsum.</div>
<div class="item">Lorem ipsum.</div>
</div>
.list {
width: 400px;
display: flex;
flex-wrap: wrap;
}
.item {
color: #fff;
width: 150px;
background-color: blue;
padding: 5px;
border: 1px solid red;
}
https://jsfiddle.net/9qz43v0g/13/
Ответы (2 шт):
Автор решения: jonic321
→ Ссылка
Легко
.list {
width: 400px;
display: flex;
flex-wrap: wrap;
border-collapse: true;
padding-top: 5px;
padding-left: 5px;
}
.item {
color: #fff;
width: 150px;
background-color: blue;
padding: 5px;
border: 4px solid red;
margin-left: -5px;
margin-top: -5px;
}
Автор решения: De.Minov
→ Ссылка
Можно использовать box-shadow + margin в одно из двух осей (допустим bottom и right)
.list {
width: 400px;
display: flex;
flex-wrap: wrap;
}
.item {
color: #fff;
width: 150px;
background-color: blue;
padding: 5px;
/* ----- */
box-shadow: 0 0 0 1px red;
margin: 0 1px 1px 0;
}
<div class="list">
<div class="item">Lorem ipsum.</div>
<div class="item">Lorem ipsum.</div>
<div class="item">Lorem ipsum.</div>
</div>
