Bug 77572 - content inside element with border-radius is not clipped to border-radius when overflow: hidden is set.
Summary: content inside element with border-radius is not clipped to border-radius whe...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P1 Major
Assignee: Nobody
URL: http://jsfiddle.net/CTS36/7/
Keywords:
: 80162 81494 (view as bug list)
Depends on:
Blocks:
 
Reported: 2012-02-01 12:50 PST by Dan Ionut Dumitriu
Modified: 2014-10-17 05:02 PDT (History)
8 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Dan Ionut Dumitriu 2012-02-01 12:50:29 PST
Image is not cropped by the border-radius of the parent element.
Comment 1 Shane Stephens 2012-02-08 19:31:36 PST
http://www.w3.org/TR/css3-background/#corner-clipping

"A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve."
Comment 2 Shane Stephens 2012-03-21 20:25:45 PDT
*** Bug 81494 has been marked as a duplicate of this bug. ***
Comment 3 Shane Stephens 2012-03-21 20:50:57 PDT
*** Bug 80162 has been marked as a duplicate of this bug. ***
Comment 4 Gabriel Schulhof 2012-03-24 15:35:49 PDT
<html>
<head>
  <title>Clipping Bug</title>
  <style>
.rounded-corners {
  position: relative;
  width: 120px;
  height: 80px;
  border: 10px solid black;
  border-radius: 30px;
  overflow: hidden;
}

.inner-box {
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
  left: -20px;
  top: -20px;
}
  </style>
</head>
<body>
  <div class="rounded-corners">
    <div class="inner-box"></div>
  </div>
</body>
</html>
Comment 5 Gabriel Schulhof 2012-03-24 15:36:16 PDT
The previous illustrates the bug.
Comment 6 Gabriel Schulhof 2012-03-24 15:38:25 PDT
My platform is Linux i386 running Google Chrome 17.0.963.83 ...
Comment 7 Binyamin 2012-07-25 23:43:36 PDT
Still not solved on Chrome 22.0.1217.0 canary.
Comment 8 Ido Rosenthal 2012-09-15 04:05:40 PDT
same bug as #72619.. please fix it
Comment 9 Bruno Couto 2014-10-17 05:02:35 PDT
Still present on Safari for IOS8 and OS X 10.10 Yosemite. Please fix this ASAP