border-corner-shape

dabblet.css

/**
 * border-corner-shape
 */

#radial-gradient
{
	width: 42px;
	height: 242px;
	background-image: radial-gradient(circle at bottom left, transparent 42px, red 42px);
	border-top-left-radius: 42px;
}

#pseudoelement
{
	width: 42px;
	height: 242px;
	background: green;
	border-top-left-radius: 42px;
	position: relative;
}

#pseudoelement::before
{
	content: "";
	position: absolute;
	bottom: 0;
	width: 42px;
	height: 42px;
	background: white;
	border-top-right-radius: 42px;
}

div
{
	display: inline-block;
	margin: 0 42px;
}

dabblet.html

<div id="radial-gradient"></div>
<div id="pseudoelement"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}