How to add border around dropdown burger menu

Site URL: https://alpaca-seadragon-j45t.squarespace.com/config/pages/website-tools/custom-css

Hello,

1. How do I add a border around dropdown burger menu on desktop only? 

2. How do I adjust the size of the borders to make the dropdown menu box bigger/smaller?

I have seen many CSS codes regarding burger menu on the forum but none that solves my problem atm.

Thank you

For reference this is the code I am using now: 

nav.header-menu-nav-list .header-menu-nav-item * {
    background-image: none !important;
    text-decoration: none !important;
    border: none !important;
}
.header .header-burger{
display:flex
} 
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
width: 30%;
margin-left: 70%;
}

.header-menu-nav-item a {
font-size: 19px;
   background-image: none;
}

The site is private

https://alpaca-seadragon-j45t.squarespace.com/?noredirect