Skip to content

Instantly share code, notes, and snippets.

@to

to/gist:2440268

Created April 21, 2012 23:35
Show Gist options
  • Save to/2440268 to your computer and use it in GitHub Desktop.
Save to/2440268 to your computer and use it in GitHub Desktop.
Download ZIP
border-radius clipping
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.frame {
width: 100px;
height: 100px;
border: 5px solid black;
overflow: hidden;
border-radius: 40px;
}
.content {
background-color: lime;
padding: 20px;
font-size: 40px;
margin: 0;
height: 500px;
}
.content-2 {
-webkit-transform: translate(0px, 0px);
}
.frame-3 {
position: absolute;
}
</style>
</head>
<body>
<div class="frame frame-1">
<p class="content content-1">1</p>
</div>
<div class="frame frame-2">
<p class="content content-2">2</p>
</div>
<div class="frame frame-3">
<p class="content content-3">3</p>
</div>
</body>
</html>
@to
Copy link
Author

to commented Apr 21, 2012

Firefox 11は全て角丸のフレームで切り抜かれる。Chrome 18は1のみ切り抜かれる。iOS Safari(5.1)も1のみ切り抜かれるが、罫線の外/最外周でカットされる(線の上に内容が表示される)(-webkit-background-clipは影響しない)。WebKitは内容やフレームにtransformを設定したりabsoluteを指定すると切り抜き対象外になる。角丸のフレーム内のコンテンツをスクロールするのは難しそう。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment