Вариант1:
<div>By using radial gradients, you can simulate rounded corners with a negative radius.</div>

Вариант2:
<span>By using radial gradients, you can simulate rounded corners with a negative radius.</span>
div {
  box-sizing: border-box;
  position: relative;
  border-radius: 25px 0 0 25px;
  background-color: red;
  padding: 5px 30px;
  color: white;
  width: 350px;
  height: 50px }

div:after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff;
  right: -35px;
  top: 50%;
  transform: translateY(-50%) }

span {
  display: block;  
  box-sizing: border-box;
  border-radius: 25px 0 0 25px;
  background: linear-gradient(270deg, #254bde, #062ca6);
  -webkit-mask: radial-gradient(circle at 100% 50%, transparent 35px, red 36px);
  padding: 5px 30px;  
  color: white;
  width: 350px;
  height: 50px }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.