"Spacious" - Add border-radius and box-shadow

Hello together,

I use the "Spacious"-Template from your Site Library.

And I want to make some changes.

First I want to add border-radius.

Actually I use this solution:

.main-navigation,
.navigation-search input[type="search"] {
border-radius: 0.375rem 0.375rem 0 0;
}
.slideout-toggle a:hover {
border-radius: 0.375rem 0 0 0;
}
.search-item a:hover,
.main-navigation .menu-bar-items .search-item.active > a{
border-radius: 0 0.375rem 0 0;
}
.site-header {
border-top: 1px solid rgba(63, 90, 102, 0.25);
border-bottom: 1px solid rgba(63, 90, 102, 0.25);   
}
.site-info {
border-radius: 0 0 0.375rem 0.375rem;
}

It shows me the border-radius but when I hover the menu or search the normal corner will show for a little few moments.

How can I fix this?

Second, I want to add a box-shadow.

I have try it with a wrapper which I add with the Elements. But then the menu is going over the footer when I click it.

How can I add the box-shadow without this effect?

Greetz from Germany

Markus