<html>
<head>
<style>
.container {
position: absolute;
top: 0px;
left: 0px;
font: 50px / 1 Ahem, sans-serif;
color: red;
}
.shape-outside {
shape-outside: inset(0px round 0 100% 0 0/ 0 100% 0 0);
width: 200px;
height: 200px;
float: left;
}
.overlay {
background-color: green;
width: 200px;
height: 200px;
}
</style>
</script>
</head>
<body>
<div class='container'>
<div class='shape-outside'></div>
x
</div>
<div class='container overlay'></div>
<p style="margin-top: 210px;">The content should wrap around the rounded inset. If the rounded inset is processed correctly, then
the red rectangle should be wrapped around the rounded edge, thus you should see only a green rectangle.</p>
<p><a href="https://code.google.com/p/chromium/issues/detail?id=341584">Issue 341584</a>: [CSS Shapes] Rounded Insets Let Content Overlap Shape</p>
</p>
</body>
</html>
Codebase Browser
chromium