如何用css做出这种圆角效果？

Question

Answer 1

.big-title{
  position: absolute;
  left: 5;
  top: 0;
  padding: 9px;
  background: #808080;
  font-size: 30px;
  border-radius: 40px;
  box-shadow: 5px 0 white;
  vertical-align: bottom;
}
.small-title{
  padding: 9px;
  margin-left: 40px;
  background: #808080;
  color: white;
  border-radius: 40px;
  line-height: 54px;
  vertical-align: bottom;
}

这样能做个大概，但是没有原图顺滑。
又换了一种方案：思路是两个一样的JWC，一个背景色为白色，放于灰色背景的下面，然后left多一点点，但这样做出来还是不顺滑：

.big-title{
  position: absolute;
  left: 0;
  top: 0;
  padding: 9px;
  background: #808080;
  font-size: 30px;
  border-radius: 40px;
  vertical-align: bottom;
  z-index: 20;
}
.placeholder{
      position: absolute;
  left: 3px;
  top: 0;
  padding: 9px;
  background: white;
  color: white;
  font-size: 30px;
  border-radius: 40px;
  vertical-align: bottom;
}
.small-title{
  padding: 9px;
  margin-left: 30px;
  background: #808080;
  color: white;
  border-radius: 40px;
  line-height: 54px;
  vertical-align: bottom;
}

解决方案3：感谢刘湿湿的提醒~
用border 解决了

.big-title{
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid white;
  padding: 9px;
  background: #808080;
  font-size: 30px;
  border-radius: 40px;
  vertical-align: bottom;
  z-index: 20;
}
.small-title{
  padding: 9px;
  margin-left: 30px;
  background: #808080;
  color: white;
  border-radius: 40px;
  line-height: 54px;
  vertical-align: bottom;
}

Answer 2

两个圆角的东东，互相覆盖一下行吗，上边那层的需要个白边

只是能做成这样的效果，不见得真的能用在产品里