CSS Как сделать такой border у блоков

Question

Как реализовать пустую границу между двумя блоками, я выделил углы они с border-radius

Answer 1

У блоков, что сверху, можно сделать

{
  ...
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  margin-bottom: -1px;
}

И для активного верхнего блока

{
  ...
  border-color: #aaa;
  border-bottom-color: #fff;
}

Тем самым border-bottom верхнего блока накладывается на border-top нижнего блока и перекрывает его цветом #fff

Пример:

.items {
  display: flex;
}
.items .item {
  font-size: 30px;
  font-weight: bold;
  padding: 20px;
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  margin-bottom: -1px;
}
.items .item.active {
  border-color: #aaa;
  border-bottom-color: #fff;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.content {
  border: 1px solid #aaa;
  padding: 20px;
  border-radius: 5px;
}

<div class='items'>
  <div class='item'>1</div>
  <div class='item active'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
</div>
<div class='content'>i'm content</div>

Answer 2

Вариант А

.items {
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 50px;
}

.item {
  display: block;
  width: 50px;
  height: 50px;
}

.item.active {
  background: #fff;
  border: 1px solid #333;
  border-bottom: 0;
  box-sizing: border-box;
}

.content {
  width: 200px;
  height: 150px;
  border: 1px solid #333;
  box-sizing: border-box;
  margin-top: -1px;
}

<div class="items">
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content"></div>

Вариант Б

.items {
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 50px;
}

.item {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid transparent;
  border-bottom-color: #333;
  box-sizing: border-box;
}

.item.active {
  border-color: #333;
  border-bottom-color: transparent;
}

.content {
  width: 200px;
  height: 150px;
  border: 1px solid #333;
  border-top: 0;
  box-sizing: border-box;
}

<div class="items">
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content"></div>

Реализация с округлением углов

Вариант А

.items {
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 50px;
}

.item {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 5px 5px 0 0;
}

.item.active {
  background: #fff;
  border: 1px solid #333;
  border-bottom: 0;
  box-sizing: border-box;
}

.content {
  width: 200px;
  height: 150px;
  border: 1px solid #333;
  box-sizing: border-box;
  margin-top: -1px;
}

<div class="items">
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content"></div>

Вариант Б

.items {
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 50px;
}

.item {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid transparent;
  border-bottom-color: #333;
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
}

.item.active {
  border-color: #333;
  border-bottom-color: transparent;
}

.content {
  width: 200px;
  height: 150px;
  border: 1px solid #333;
  border-top: 0;
  box-sizing: border-box;
}

<div class="items">
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="content"></div>

БЛОГ НА HUSL

CSS Как сделать такой border у блоков

Ответы (2 шт):