<!DOCTYPE html>
<style>
#container {
width: 300px;
font: 40px/1 Ahem;
color: green;
text-align: right;
}
#float {
float: right;
width: 240px;
height: 120px;
border-top-left-radius: 60px;
border-bottom-left-radius: 60px;
border-top-right-radius: 0px;
border-bottom-right-radius: 120px;
background-color: blue;
background-clip: border-box;
}
</style>
<body>
<p>The green square should apear to the left of the blue rounded shape.
<div id="container">
<div id="float"></div>
<br>X
</div>
</body>