ul and li border

by Dan

HTML

<div id="nav" class="topNav">
  <ul>
    <li class="active"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

SCSS

///Mixins and Variables///
@mixin border-radius($top-left, $top-right, $bot-left, $bot-right) {
  -webkit-border-top-left-radius: $top-left;
     -moz-border-top-left-radius: $top-left;
          border-top-left-radius: $top-left;
  
  -webkit-border-top-right-radius: $top-right;
     -moz-border-top-right-radius: $top-right;
          border-top-right-radius: $top-right;
  
  -webkit-border-bottom-right-radius: $bot-left;
     -moz-border-bottom-right-radius: $bot-left;
          border-bottom-right-radius: $bot-left;
  
  -webkit-border-bottom-left-radius: $bot-right;
     -moz-border-bottom-left-radius: $bot-right;
          border-bottom-left-radius: $bot-right;
}

@mixin transition($property, $duration, $bezier:null, $delay:null) {
  -webkit-transition: $property $duration $bezier $delay;
     -moz-transition: $property $duration $bezier $delay;
       -o-transition: $property $duration $bezier $delay;
          transition: $property $duration $bezier $delay;
}

@mixin transform($args...) {
  -webkit-transform: $args;
     -moz-transform: $args;
       -o-transform: $args;
          transform: $args;
}

$link-color: white;
$active-color: hsl(226, 73%, 65%);
$rad: 20px;

//Styling
.topNav {
  ul {
    margin:10px 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index:1;
    left: 50%;
    background: hsl(180, 0%, 38%);
    background: hsla(180, 0%, 38%, 0.8);
    border-style: solid;
    border-width: 3px;
    border-color: blue;
    overflow: hidden;
    @include border-radius($rad, $rad, $rad, $rad);
  }
  
  li {
    float: left;
    display: inline-block;
    @include transition(all, 1s);
    
    &:hover {
      background: hsl(360, 27%, 38%);
      @include transition(all, 1s);
    }
    
    &.active {
        a {
          background: hsl(34, 41%, 28%);
          background: hsla(34, 41%, 28%, 0.8);
          color: $active-color;
          @include transition(all, 1s);
          
          &:hover {
            background:...