There is a picture that needs to round the corners, but leave a shadow. Now the substrate under the picture with rounded corners and with a shadow, but on a white background and in size extends beyond the edges of the image. However, if you assign a transparent color to the box-shadow property, then the shadow itself will disappear - how can you solve the problem?

 .owl-item { box-shadow: 0 22px 87px rgba(0, 0, 0, 0.3); opacity: 0.3; border-radius: 30px; } 
 <div class="owl-item active center"> <div class="item"> <img src="http://placehold.it/350x150"> </div> </div>

  • I still do not understand what exactly do you need? Please clarify - alexoander
  • html-construction allowed? - Igor
  • @alexoander below there are correct answers, even 2 Igor is not, why - we have already decided - Vasya

2 answers 2

 .owl-item img{ border-radius: 30px; box-shadow: 0 22px 87px rgba(0, 0, 0, 0.3); } 
 <div class="owl-item active center"> <div class="item"> <img src="http://placehold.it/350x150"> </div> </div>

  • so you have the same white background of the substrate has not disappeared anywhere and has not changed in size - Vasya
  • so what do you need, give a shadow to the picture and round it ??? question means not correctly asked - Karalahti Nov.
  • Look now, so you had to? - Karalahti
  • yes, only the opacity you somehow removed - Vasya

  .owl-item img { border-radius: 30px; box-shadow: 0 12px 17px rgba(0, 0, 0, 0.3); opacity: 0.3; } 
 <div class="owl-item active center"> <div class="item"> <img src="http://placehold.it/350x150"> </div> </div>