I figured out what is happening. It turns out that ion-card has some default background stylings that always show up regardless of whether you apply the border-radius. (I don’t know what is actually happening with the CSS that causes these to appear, and don’t know how to turn them off.) A solution I have found is to replace the ion-card with div, like:
Where the variables.scss contains the following:
border-radius: 10px 10px 0px 0px;
border-radius: 0px 0px 10px 10px;
I don’t know if there is an easier way to do this by simply getting rid of features of the ion-card CSS. Simply setting border-radius: 10px doesn’t do the job.