CODEWITHSUNDEEP
htmlcss
Prince
Prince

Reputation: 65

Box shadow not rounding

So i'm working on this website - http://www.roseandlilyprinting.com/

If you go to the port-folio section you would see that the box shadow is not rounding to suite the border radius making the box shadow disrupt the feel

Here's the CSS Snippet the #navBarPort is what has the box shadows along with #allImages

Thanks for your help 

#navBarPort {
    background-color: #CCCCCC;
    display: block;
    height: 80px;
    margin: 55px auto;
    position: relative;
    text-align:center;
    font-size: 1.2em;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 1px 1px 1px #999,
    2px 2px 2px #999,
    3px 3px 3px #999,
    4px 4px 4px #999,
    5px 5px 5px #999,
    6px 6px 6px #999,
    7px 6px 7px #999,
    8px 6px 8px #999,
    9px 6px 9px #999;
}


#navBarPort a{
    color: #FFFFFF;
    display: inline-block;
    height: 39px;
    line-height: 37px;
    padding: 0 15px;
    text-shadow:1px 1px 1px #315218;
    text-decoration: none;
}

#navBarPort a:hover{
    text-decoration:none;
    color: #27A5BA;
}

#navBarPort a.active{
    color: #27A5BA;
}


/*----------------------------
	Content area
-----------------------------*/
#images {
    height: 460px;
    display: inline-block;
    text-align: center;
    padding-left: 20px;
    overflow: hidden;

}


#allImages{
    display:block;
    height: 490px;
    margin:0 auto;
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 10px -10px 5px #999;
    -moz-box-shadow: 10px -10px 5px #999;
    -webkit-box-shadow: 10px -10px 5px #999;
    -o-box-shadow: 10px -10px 5px #999;
    background-color: #CCCCCC;
}

#allImages li{

    float: left;
    height: 96px;
    list-style: none outside none;
    margin: 6px;
    position: relative;
    width: 115px;
    overflow: hidden;
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

#allImages ul li img{
    cursor: pointer;
    width: 100%;
    height: 100%;
}

#allImages ul{
    overflow:auto;
    display: inline-block;
    text-align: center;
}

#allImages ul.hidden{
    display:none;
}

Upvotes: 2

Views: 1414

Answers (1)

Purag
Purag

Reputation: 17071

Your box shadows are cut off because of the overflow: hidden property on the div element with class flex-viewport.

Note that box shadows don't necessarily stay within an element's bounding box, and thus can be considered overflow.

Note that removing that property will interfere with the flex slider, but it's possible to find a workaround (for example, setting overflow: hidden on a parent element).

Upvotes: 1

Related Questions