Вариант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);
mask: radial-gradient(circle at 100% 50%, transparent 35px, red 36px);
padding: 5px 30px;
color: white;
width: 350px;
height: 50px }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.