How to apply radius to box-shadow?

Question

I applied box-shadow and border-radius css to pp-content-post-slider class.

border-radius:10px;
box-shadow:0px 0px 15px 0px rgb(0 0 0 / 9%);

<div class="owl-stage-outer">
    <div class="owl-stage" style="..">
        <div class="pp-content-post-slider" style="padding:0px; border-radius:10px;box- 
        shadow:0px 0px 15px 0px rgb(0 0 0 / 9%)">
        </div>
        <div class="pp-content-post-slider" style="padding:0px; border-radius:10px;box- 
         shadow:0px 0px 15px 0px rgb(0 0 0 / 9%)">
        </div>
    </div>
</div>

Css is working well but the problem is no curves are applied to the shadows.

i am confused why not applied radius.

Also i put overflow: hidden; for hiding , still not work.

Could some one tell me how do i solve this?

Thank you.

Does this answer your question? [Using border-radius and box-shadow together (CSS)](https://stackoverflow.com/questions/2714765/using-border-radius-and-box-shadow-together-css) — Joy Dey, Mar 08 '22 at 09:46

score 2 · Accepted Answer · answered Mar 08 '22 at 08:51

because it is 'BOX" shadow, it does not have border-radius, but you can use filter drop-shadow css .

Using drop-shadow allows us to add a shadow to an element that doesn’t correspond to its bounding box, but instead uses the element’s alpha mask. We could add a drop shadow to a transparent PNG or SVG

 filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));

refer https://css-irl.info/drop-shadow-the-underrated-css-filter/

How to apply radius to box-shadow?

1 Answers1