Skip to content

Instantly share code, notes, and snippets.

@varoot

varoot/chrome-radius.html

Last active August 29, 2015 14:20
Show Gist options
  • Save varoot/1e32cafb611b3beb9828 to your computer and use it in GitHub Desktop.
Save varoot/1e32cafb611b3beb9828 to your computer and use it in GitHub Desktop.
Download ZIP
Chrome Bug for border-radius on img
Raw
chrome-radius.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
<title>Chrome Bug - Border Radius</title>
<style>
* {border: 0; margin: 0; padding: 0;}
body {margin: 20px;}
.circle {border-radius: 50%;}
.circle+.circle {margin-top: 20px;}
</style>
</head>
<body>
<div><img src="http://placehold.it/20x20" class="circle"></div>
<div><img src="http://placehold.it/50x50" class="circle"></div>
<div><img src="http://placehold.it/70x70" class="circle"></div>
<div><img src="http://placehold.it/150x150" class="circle"></div>
<div><img src="http://placehold.it/200x200" class="circle"></div>
<div><img src="http://placehold.it/400x400" class="circle"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment