SOURCE

<nav>
  <ul class="links-list">
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
  </ul>
</nav>    
    

<div class="container">
  <div class="box">Change my borders.</div>
</div>

nav ul{
  list-style:none;
  border:1px solid black; 
  padding:10px 10px 10px 10px;
}
li{
  display:inline-block;
}

nav .links-list a {

  background-color: rgb(179,57,81);
  color: #ffff;
  text-decoration: none;
  padding: 1em 2em;
  width:calc(30%);
}

.links-list a:hover {
  background-color: rgb(66, 28, 40);
  color: #fff;
}


.container {
  border-top: 5px dotted green;
  border-right: 1px solid black;
  border-bottom: 20px double rgb(23,45,145);
}

.box {
  border: 1px solid #333333;
  border-top-style: dotted;
  border-right-width: 20px;
  border-bottom-color: hotpink;
}