Border-radius and box-shadow CSS is not working as I'd like

https://stackoverflow.com//questions/22078847

24-12-2019
|

Question

I am having some problems creating this layout.

This is my code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
        <div class="row " style="">
            <div class="col-md-6  news_basic_style">
                <div class="newsproducts_style">
                <img src="http://placehold.it/150x150">
              </div>

            </div>
            <div class="col-md-6  news_basic_style">
                <div class="newsproducts_style">
                <img src="http://placehold.it/150x150"></div>

            </div>
        </div>
        <div class="row">
            <div class="col-md-6  news_basic_style">
                <div class="newsproducts_style">
                <img src="http://placehold.it/150x150"></div>

            </div>
            <div class="col-md-6  news_basic_style">
                <div class="newsproducts_style">
                <img src="http://placehold.it/150x150"></div>

            </div>
        </div>



    </body>
</html>

CSS

body{
  background-color:#99B3FF;
}  
.news_basic_style{
  border-radius: 20px;
box-shadow:5px 5px 10px rgba(0,0,0,0.65);

}

.news_basic_style{
  background-color:white;
  width:170px;
  margin:20px;
}

Screenshot of what I want and what I have

update Thanks for the edit TRiG

solution demo:

Solution

Apply the border-radius and box-shadow directly to the image and remove the background, like so:

img{
    border-radius: 20px; 
    box-shadow:5px 5px 10px rgba(0,0,0,0.65);    
}

http://jsfiddle.net/LrmfU/

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow