background-clip with round border radius

Question

How do you implement border radius on background-clip: padding-box ?

I have a thick border with opacity; however, all four inner corners are 90deg angles.

<!DOCTYPE html>
<html>
<head>
    <title>Border</title>
    <style>
        body, html{
            width: 100%;
            height: 100%;
        }
        .image_frame{
            display: flex;
            width:50%;
            background: white;
            background-clip: padding-box;
            border: 20px solid rgba(0, 0, 0, 0.3);
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div class="image_frame">
        <img src="http://trudog.com/home/wp-content/uploads/2015/03/Shocked-Pups.jpg">
    </div>
</body>
</html>

If your border is more than 3px than the corners will be 90degrees. Unfortunately I don't know a solution. — Abdul Sadik Yalcin, Jun 06 '15 at 01:03

score 3 · Answer 1 · edited May 23 '17 at 11:43

Your implementation of background-clip: padding-box is fine. The background of the parent of .image_frame (in this case, body) should indeed be visible underneath the semitransparent border.

The problem here is that your border width is equal to your border radius. As a result, the inner corners of your border will be 90 degrees, since the rounded corners essentially take the form of solid quadrants. From the spec:

The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness. In the case where this results in a negative value, the inner radius is zero.

If you want the inner corners to have a radius, you will need to specify a border radius larger than your border width. For an inner radius of 20px and a border-width of 20px, the resulting border-radius is 40px:

.image_frame {
    display: flex;
    width: 50%;
    background: white;
    background-clip: padding-box;
    border: 20px solid rgba(0, 0, 0, 0.3);
    border-radius: 40px;
    overflow: hidden;
}

Additionally, you will need to set overflow: hidden in order for the rounded corners to actually clip the image; see my answer to this question for details.

score 1 · Answer 2 · answered Jun 06 '15 at 01:30

<!DOCTYPE html>
<html>
<head>
<title>Border</title>
<style>
.image_frame {
 display: flex;
 width: 150px;
 background: white;
 background-clip: padding-box;
 border: 20px solid rgba(0, 0, 0, 0.3);
 border-radius: 190px;
 }
 body, html{
        width: 100%;
        height: 100%;
    }
</style>
</head>
 <body>
  <div class="image_frame">
    <img src="http://trudog.com/home/wp-content/uploads/2015/03/Shocked-Pups.jpg" style="border-radius: 146px;width: 150px; height: 150px;">
  </div>
</body>
  </html>

try this..... https://jsfiddle.net/f0v5v8ns/1/

background-clip with round border radius

2 Answers2