Box-shadow, border doesn't show on top-bottom of element

[djburak]

Alright so, I have a carousel slider using a public jquery script and it seems like I'm dealing with some problems with the style of the boxes for the slider.Everything is fine except that the border and the shadow isn't appearing on the top and on the bottom of the box. (Like it's cut there).I've tried to add bigger height on my ul or padding, on the li too.. and nothing seemed to work.Here's the HTML:\[code\]<div class="carousel"> <ul id="carousel-list"> <li> <img src="http://stackoverflow.com/questions/11542554/img/img1.png" width="200" height="150" /> <div class="mask"> <a href="http://stackoverflow.com/questions/11542554/#" class="info">+</a> </div> </li> <li> <img src="http://stackoverflow.com/questions/11542554/img/img2.png" width="200" height="150" /> <div class="mask"> <a href="http://stackoverflow.com/questions/11542554/#" class="info">+</a> </div> </li> <li> <img src="http://stackoverflow.com/questions/11542554/img/img3.png" width="200" height="150" /> <div class="mask"> <a href="http://stackoverflow.com/questions/11542554/#" class="info">+</a> </div> </li> <li> <img src="http://stackoverflow.com/questions/11542554/img/img4.png" width="200" height="150" /> <div class="mask"> <a href="http://stackoverflow.com/questions/11542554/#" class="info">+</a> </div> </li> <li> <img src="http://stackoverflow.com/questions/11542554/img/img5.png" width="200" height="150" /> <div class="mask"> <a href="http://stackoverflow.com/questions/11542554/#" class="info">+</a> </div> </li> <li> <img src="http://stackoverflow.com/questions/11542554/img/img6.png" width="200" height="150" /> <div class="mask"> <a href="http://stackoverflow.com/questions/11542554/#" class="info">+</a> </div> </li> <li> <img src="http://stackoverflow.com/questions/11542554/img/img6.png" width="200" height="150" /> <div class="mask"> <a href="http://stackoverflow.com/questions/11542554/#" class="info">+</a> </div> </li> </ul> <a href="http://stackoverflow.com/questions/11542554/#" class="prev-btn">Prev</a> <a href="http://stackoverflow.com/questions/11542554/#" class="next-btn">Next</a> </div>\[/code\]And the CSS here (Where I believe to be the issue):-> I know its kind of dirty right now, I was supposed to clean it up as soon as I find out what's wrong with the boxes.\[code\].carousel { width:870px; position:relative;}.carousel ul { list-style-type:none; margin: 0; padding: 0; display: block; overflow:hidden;}.carousel ul li { float:left; padding:0; margin:0 14px 0 0; overflow: hidden; position: relative; left:2px; text-align: center; cursor: default; box-shadow: 0 0 6px rgba(0,0,0, .2), 0 0 0 1px #d6d6d6; border: solid #fff 3px;}.carousel ul li:last-child { margin-right:0; }a.next-btn, a.prev-btn { position:absolute; top:-58px; left:788px; width:39px; height:25px; display:block; text-indent:-9999px;}a.next-btn { left:830px; background-image:url(../img/carousel-next.png);}a.next-btn:hover { background-image:url(../img/carousel-next-hover.png);}a.prev-btn { background-image:url(../img/carousel-prev.png);}a.prev-btn:hover { background-image:url(../img/carousel-prev-hover.png);}.carousel ul li:hover { box-shadow: 0 0 12px rgba(0,0,0, .3), 0 0 0 1px #d6d6d6;}.carousel ul li img { width: 200px; height: 150px; display: block; float: left; position: relative;}.carousel ul li .mask { width: 200px; height: 150px; overflow: hidden; position:absolute; top: 0; left: 0; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(255,102,0, 0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}.carousel ul li:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}.carousel ul li a.info { font-family: 'PT Sans', sans-serif; font-size:1.063em; display: inline-block; margin:auto; padding: 3px 12px; background: rgba(0, 0, 0, 0.8); color: #fff; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.carousel ul li a.info:hover { background: rgba(255, 255, 255, 0.8); color:#ff6600; text-shadow:none; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);}.carousel ul li:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s;}\[/code\]Here's an image of the issue: i.stack.imgur.com/Sh9K4.pngThank you in advance, I'm hoping it's just something I missed and can be fixed easily!