<!-- css border-radius & tabs effect  -->
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>css border-radius & tabs effect</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <header>
        <h1>css border-radius & tabs effect</h1>
    </header>
    <main>
        <section>
            <div class="box">
              <div class="item item-selected">
                <div class="item-left">VIP</div>
              </div>
              <div class="item item-unselected">
                <div class="item-right">Others</div>
              </div>
            </div>
        </section>
        <article></article>
    <main>
    <footer>
        <p>copyright&copy; xgqfrms 2020</p>
    </footer>
    <!-- js -->
    <script src="./index.js"></script>
</body>
</html>

@charset "UTF-8";

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box{
  width: 100vw;
  height: auto;
  min-height: 100px;
  display: flex;
  flex-wrap: nowrap;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 0;
}

.item {
  width: 50%;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.item-selected{
  background: #000;
}

.item-unselected{
  background: #fff;
}


// .item-left{
//   border-radius: 0 25px 0 0;
//   -webkit-border-radius: 0 25px 0 0;
//   -moz-border-radius: 0 25px 0 0;
//   -ms-border-radius: 0 25px 0 0;
//   -o-border-radius: 0 25px 0 0;
//   position: relative;
// }

// .item-right{
//   border-radius: 0 0 0 25px;
//   -webkit-border-radius: 0 0 0 25px;
//   -moz-border-radius: 0 0 0 25px;
//   -ms-border-radius: 0 0 0 25px;
//   -o-border-radius: 0 0 0 25px;
//   position: relative;
// }

.item-unselected .item-left,
.item-unselected .item-right {
  color: #fff;
  background: #000;
}

.item-unselected .item-left{
  border-radius: 0 0 25px 0;
}
.item-unselected .item-right {
  border-radius: 0 0 0 25px;
}

.item-selected .item-left,
.item-selected .item-right {
  color: #000;
  background: #fff;
}

.item-selected .item-left{
  border-radius: 0 25px 0 0;
}
.item-selected .item-right {
  border-radius: 25px 0 0 0;
}
View Compiled 
"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-04-28
 * @modified
 *
 * @description css border-radius
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;

const items = [...document.querySelectorAll(`.item`)];

const updateSelected = (items, selectedItem) => {
  items.forEach(item => {
    item.classList.remove(`item-selected`);
    item.classList.add(`item-unselected`)
  });
  selectedItem.classList.remove(`item-unselected`);
  selectedItem.classList.add(`item-selected`)
}

for (const item of items) {
  const flag = item.dataset.flag || false;
  if(!flag) {
    item.dataset.flag = true;
    item.addEventListener(`click`, (e) => {
      const className = e.target.getAttribute(`class`);
      switch (className) {
        case `item-left`:
        case `item-right`:
          updateSelected(items, e.target.parentElement);
          break;

        default:
          break;
      }
    });
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.