I have the following code implemented on a website to blur the objects behind the box it spans:

<style>
            
                html, body {
                border-radius: 15px;
                background: rgba(0,0,0,.1);
                margin:   0;
                padding:  0;
                width:    auto;
                height:   auto;

              -webkit-backdrop-filter: blur(.5em);
              backdrop-filter:blur(.7em)
          }

Works fine so far, except that the background color does not follow the border-radius, resulting in this:

border_radius:

I've tried to hide overflow, setting a solid border and adding a -webkit-border-radius, but that hasn't worked. Any ideas?

CodePudding user response：

You cannot apply border-radius on html because it is a part of browser view:

html, body {
                border-radius: 15px;
                background: rgba(0,0,0,.1);
                margin:   0;
                padding:  0;
                width:    50px;
                height:   50px;

              -webkit-backdrop-filter: blur(.5em);
              backdrop-filter:blur(.7em)
          }

It is not like regular html tags:

<div id="test" style="
    border-radius: 15px;
    background: rgba(0,0,0,.1);
    margin:   0;
    padding:  0;
    width: 50px;
    height: 50px;
    -webkit-backdrop-filter: blur(.5em);
    backdrop-filter:
    blur(.7em);
"></div>

CodePudding user response：

In a case where the background does not follow border-radius, I think this is because the background differs from the actual tag itself, since it is "a portion of the HTML" that the current tag sits on. While the border represents the extreme line around the tag as seen in the "box-model".

For more info on CSS Box-Model see: https://www.w3schools.com/css/css_boxmodel.asp