How add circular shadow in the bottom of navigation - html

Question

Good evening, guys,
Could you please give me an advice,
I think I was at a deadlock!
There is the main navigation menu on the top of website.
Problem is that, I don't know how we can input shadow over the our navigation, directly in the bottom of navigation and it won't stop work of our left and right borders.
So, if I will put our shadow in another block (in my case "circle_shadow"), it won't cover up our borders, it will create new space after navigation.
I am interested, how can we put this kind of shadow on our menu, over the navigation borders?
Please, take a look:
<div class="container">
<div class="row">
<div class="common_block">
<div class="col-lg-2">Here we have a logo_1</div>
<div class="col-lg-8 border">Here is navigation</div>
<div class="col-lg-2">Here is logo_2</div>
<div class="circle_shadow"></div>
</div>
</div>
</div>
CSS:
.border {
border-right: 1px solid black;
border-left: 1px solid black;
}
.circle_shadow {
position: relative;
overflow: hidden;
padding:5px;
}
.box_center_shadow_m:before {
content: "";
height: 100px;
position: absolute;
right: 10px;
top: -99px;
left: 10px;
border-radius: 50%/60px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
Here I attached some images:

Answer 1

It is a little hard to follow what you are asking, there might be an english barrier here. But if you are looking for a rounded drop shadow, here are some samples:
.roundedCorner {
width:350px;
height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
border-radius:25px;
}
.circle {
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
More shadow options can be seen at a CoreLangs

Answer 2

Sorry for not clear question.
Yes, I know how to use rounded drop shadow.
Problem is not about how create rounded drop shadow.
Problem is how can we put this rounded drop shadow into the bottom of navigation block. This is the major question.
Take a look on this code:
I)
<div class="container">
<div class="row " style="background-color:#454545">
<div class="common_block">
<div class="col-md-2" style="background-color:#454545">
<a href="#" title="Omvana">
<img src="images/images.jpg" alt="Logo" />
</a>
</div>
<div class="col-md-8 border " style="background-color:#454545">
<ul class="h_menu">
<li class="active">
<a href="#" title="NEWS" >NEWS</a>
</li>
<li >
EVENTS
</li>
<li >
DOWNLOADS
</li>
<li >
TOUR
</li>
</ul>
</div>
<div class="col-md-2" style="background-color:#454545">
<div class="block_logo_2">
</div>
</div>
<div class="rounded_drop_shadow">
</div>
</div>
</div>
</div>
CSS:
.rounded_drop_shadow {
position: relative;
background: none repeat scroll 0% 0% transparent;
overflow:hidden;
padding:3px;
}
.rounded_drop_shadow:before {
content: "";
height: 100px;
position: absolute;
right: 10px;
top: -100px;
left: 10px;
border-radius: 50%/60px;
box-shadow: 0 0 60px rgba(0,0,0,0.3);
}
Now, this image shows, that shadow was added to the navigation block, but in extra space after.
http://i.imgur.com/rFuBnOB.png
But, my target is not extend block of navigation, just we have to put it above of navigation menu on the bottom. As if on top of it!
It should be like here:
http://i.imgur.com/ed3zWJL.png
Now, I found a solution, but I wonder if you take a look and will be able to give advice about this option:
Maybe, we should put block div with class="rounded_drop_shadow" inside another block div with class="shadow" (Both of them will still inside common_block) and play with position:absolute?
<div class="common_block">
<div class="col-md-2" style="background-color:#454545">
<a href="#" title="Omvana">
<img src="images/images.jpg" alt="Logo" />
</a>
</div>
<div class="col-md-8 border " style="background-color:#454545">
<ul class="h_menu">
<li class="active">
<a href="#" title="NEWS" >NEWS</a>
</li>
<li >
EVENTS
</li>
<li >
DOWNLOADS
</li>
<li >
TOUR
</li>
</ul>
</div>
<div class="col-md-2" style="background-color:#454545">
<div class="block_logo_2">
</div>
</div>
<div class="shadow">
<div class="rounded_drop_shadow"></div></div>
</div>
</div>
CSS
.box_center_shadow {
position: absolute;
top: 64px;
left: 0px;
right: 0px;
}
I wonder if somebody can tell me, if it is right way....or offer another options.
Thanks.