How to round a linear-gradient background that is divided horizontally in two?

Question

I have a big section with this background: background: linear-gradient(180deg, #fff 20%, #98DB43 20%); And I am trying to round the top left and right corners of the bottom section (with the #98DB43 colour).

Answer 1

You can consider radial gradient to simulate the rounded corners

.box {
  height:200px;
  width:200px;
  background: 
    radial-gradient(farthest-side at bottom right,transparent 100%,#fff 100%) 
    left 0 top  calc(20% + 0.2*40px) /* background-position */
    /40px 40px, /* background-size */
    radial-gradient(farthest-side at bottom left ,transparent 100%,#fff 100%) 
    right 0 top calc(20% + 0.2*40px) /* background-position */
    /40px 40px, /* background-size */
    
    linear-gradient(180deg, #fff 20%, #98DB43 20%);
  background-repeat:no-repeat;
  border:1px solid;
}

<div class="box"></div>

Use different coloration to better understand the trick:

.box {
  height:200px;
  width:200px;
  background: 
    radial-gradient(farthest-side at bottom right,red 100%,blue 100%) 
    left 0 top  calc(20% + 0.2*40px)
    /40px 40px,
    radial-gradient(farthest-side at bottom left ,yellow 100%,green 100%) 
    right 0 top calc(20% + 0.2*40px)
    /40px 40px,
    
    linear-gradient(180deg, #fff 20%, #98DB43 20%);
  background-repeat:no-repeat;
  border:1px solid;
}

<div class="box"></div>

Related to understand the logic behind the calculation of the background-position: Using percentage values with background-position on a linear gradient

You can add CSS variables to have better control:

.box {
  --r:40px; /* control the radius */
  --p:0.2;  /* gradient percentage (from 0 to 1)*/
  
  height:200px;
  width:200px;
  background: 
    radial-gradient(farthest-side at bottom right,transparent 100%,#fff 100%) 
    left 0 top  calc(calc(var(--p)*100%) + var(--p)*var(--r)) /* background-position */
    /var(--r) var(--r), /* background-size */
    radial-gradient(farthest-side at bottom left ,transparent 100%,#fff 100%) 
    right 0 top calc(calc(var(--p)*100%) + var(--p)*var(--r)) /* background-position */
    /var(--r) var(--r), /* background-size */
    
    linear-gradient(180deg, #fff calc(var(--p)*100%), #98DB43 calc(var(--p)*100%));
  background-repeat:no-repeat;
  border:1px solid;
  display:inline-block;
}

<div class="box"></div>
<div class="box" style="--r:20px;--p:0.3"></div>
<div class="box" style="--r:10px;--p:0.5"></div>
<div class="box" style="--r:50px;--p:0.6"></div>