Hi,
I’m not quite sure the exact effect you want but you will need to rub the background out with another colour if you wanted the area inside to stay red.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:white }
.roundCorner {
width: 150px;
height: 4px;
padding: 2em;
border: 1px solid;
border-bottom:0;
position:relative;
background:red;
border-radius:1em 1em 0 0;
}
.roundCorner:after {
position:absolute;
left:-1px;
right:-1px;
bottom:0;
height:1.5em;
border:1px solid black;
border-bottom:0;
border-radius:3em 3em 0 0;
content:'';
background:white;
}
</style>
</head>
<body>
<div class="roundCorner"></div>
</body>
</html>
Of course it does only work if the background is a solid colour.
