Как сделать внешний border-radius

Question

Как сделать, как бы "внешний" border-radius, как показано на картинке? (Обведено красными кругами). Только css.

Answer 1

Как-то так:

.bg div {
  display:inline-block;
  border-radius: 10px;
  background: black;
  width:50px;
  text-align: center;
  color:red
}

.bg div.select {
  background: white;
}

.bg{
  padding: 10px 0;
  width:150px;
  background: linear-gradient(to top, white 50%, black 50%)
}

<div class=bg>
<div>1</div><div class="select">2</div><div>3</div>
</div>

Answer 2

Вот такой вариант на CSS с использованием псевдоэлементов и radial-gradient()

// Для демонстрации результата
$('.tabs').on('click', '.item', function(){
  $('.tabs').find('.item.-active').removeClass('-active');
  $(this).addClass('-active');
});

.tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  background: red;
}

.item {
  --active-color: blue;
  --active-radius: 6px;
  /*  */
  display: block;
  width: auto;
  padding: 8px 10px;
  border-radius: var(--active-radius) var(--active-radius) 0 0;
  position: relative;
  cursor: pointer;
}

.item::before,
.item::after {
  content: '';
  display: none;
  width: var(--active-radius);
  height: var(--active-radius);
  background-size: calc(var(--active-radius) * 1.5) calc(var(--active-radius) * 1.5);
  position: absolute;
  bottom: 0;
}

.item::before {
  background-image: radial-gradient(circle at top left, transparent 44%, var(--active-color) 50%);
  left: calc(var(--active-radius) * -1);
}

.item::after {
  background-image: radial-gradient(circle at top right, transparent 44%, var(--active-color) 50%);
  background-position: 100% 0;
  right: calc(var(--active-radius) * -1);
}

.item:first-child {
  margin-left: var(--active-radius);
}

.item:not(:last-child) {
  margin-right: calc(var(--active-radius) * 2);
}

.item:last-child {
  margin-right: var(--active-radius);
}

.item.-active {
  background: var(--active-color);
  color: #fff;
  cursor: default;
}

.item.-active::before,
.item.-active::after {
  display: block;
}

.content {
  display: block;
  width: 100%;
  height: 100px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tabs">
  <div class="item">Item 1</div>
  <div class="item -active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>
<div class="content"></div>

Вариант с плавной анимацией появление

// Для демонстрации результата
$('.tabs').on('click', '.item', function(){
  $('.tabs').find('.item.-active').removeClass('-active');
  $(this).addClass('-active');
});

.tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  background: red;
}

.item {
  --active-color: blue;
  --active-radius: 6px;
  /*  */
  display: block;
  width: auto;
  padding: 8px 10px;
  border-radius: var(--active-radius) var(--active-radius) 0 0;
  position: relative;
  cursor: pointer;
}

.item::before,
.item::after {
  content: '';
  display: block;
  width: var(--active-radius);
  height: var(--active-radius);
  background-size: calc(var(--active-radius) * 1.5) calc(var(--active-radius) * 1.5);
  opacity: 0;
  position: absolute;
  bottom: 0;
}

.item::before {
  background-image: radial-gradient(circle at top left, transparent 44%, var(--active-color) 50%);
  left: calc(var(--active-radius) * -1);
}

.item::after {
  background-image: radial-gradient(circle at top right, transparent 44%, var(--active-color) 50%);
  background-position: 100% 0;
  right: calc(var(--active-radius) * -1);
}

.item:first-child {
  margin-left: var(--active-radius);
}

.item:not(:last-child) {
  margin-right: calc(var(--active-radius) * 2);
}

.item:last-child {
  margin-right: var(--active-radius);
}

.item.-active {
  background: var(--active-color);
  color: #fff;
  cursor: default;
}

.item.-active::before,
.item.-active::after {
  opacity: 1;
}

.item,
.item::before,
.item::after {
  transition: all .4s linear;
}

.content {
  display: block;
  width: 100%;
  height: 100px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tabs">
  <div class="item">Item 1</div>
  <div class="item -active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>
<div class="content"></div>

Совет: для такой задачи, использовать SVG, ну или на крайняк изображение с прозрачным фоном.

БЛОГ НА HUSL

Как сделать внешний border-radius

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