CODEWITHSUNDEEP
htmlcss
cheonmu
cheonmu

Reputation: 61

How to apply radius to box-shadow?

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.

Upvotes: 0

Views: 2587

Answers (1)

Junaid Shaikh
Junaid Shaikh

Reputation: 1143

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/

Upvotes: 4

Related Questions