特定の場合においてborderが効かない

HTML、CSSを学び始めて、とあるサイトの模写コーディングをしている最中なのですが、下記Sassのソースリスト中のセレクタ.lastに関して、祖先要素のセレクタ.navの外側でこの.lastの内容を記述すると、border-radiusは効いているのですが、borderの方が何故かどうしても効かないです。.nav .last~と書けばborderも効くようになるのですが、これは一体どういうことなのでしょうか。どなたかご教授お願いいたします。

ちなみに、ブラウザは主にGoogleChromeで動作させていますが、Safariでも検証したところ、同じ結果だったので、リセットCSSは関係ないと判断しましたので、リセットCSSのソースは割愛しております。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="stylesheet.css">
7    <title>Dental Clinic</title>
8</head>
9<body>
10<header width="920" height="208">
11    <div class="top-wrapper">
12        <a href="#">
13            <img src="./images/siteTitle.png" alt="" class="siteTitle">
14        </a>
15        <div class="contact">
16            <p class="catchCopy">“地域に根付いた歯科医院” デンタル クリニック</p>
17            <div class="contact__element">
18                <!-- <img src="./images/bgTel.png" alt="" class="phoneImg"> -->
19                <h1 class="phoneNumber">03-0000-0000</h1>
20            </div>
21            <div class="accept-time">
22                <p class="accept-time__text--black">予約受付時間 10:00～19:30 
23                    <span class="accept-time__text--red">日祝 休診</span>
24                </p>
25            </div>
26        </div>
27        <div class="nav">
28            <div class="form">
29                <a href="#" class="form__btn first">
30                    <h3 class="form__btn--text-ja">トップページ</h3>
31                    <p class="form__btn--text-en">HOME</p>
32                </a>
33            </div>
34            <div class="form">
35                <a href="#" class="form__btn">
36                    <h3 class="form__btn--text-ja">医院紹介</h3>
37                    <p class="form__btn--text-en">CLINIC</p>
38                </a>
39            </div>
40            <div class="form">
41                <a href="#" class="form__btn">
42                    <h3 class="form__btn--text-ja">診療案内</h3>
43                    <p class="form__btn--text-en">SERVICE</p>
44                </a>
45            </div>
46            <div class="form">
47                <a href="#" class="form__btn">
48                    <h3 class="form__btn--text-ja">院長・スタッフ紹介</h3>
49                    <p class="form__btn--text-en">STAFF</p>
50                </a>
51            </div>
52            <div class="form">
53                <a href="#" class="form__btn last">
54                    <h3 class="form__btn--text-ja">アクセス</h3>
55                    <p class="form__btn--text-en">ACCESS</p>
56                </a>
57            </div>
58        </div>
59    </div>
60</header>
61<main></main>
62<footer></footer>
63</body>
64</html>

↓該当の部分のソースコードです。

Sass
1$darker-green: rgb(108, 198, 196);
2$lighter-green: rgb(156, 227, 225);
3
4.nav {
5    margin-top: 31px;
6    display: flex;
7    border: 1px solid $darker-green;
8    border-radius: 6px;
9    background-image: linear-gradient($lighter-green 0%, $darker-green 100%);
10    .form {
11        width: 20%;
12        height: 70px;
13        &__btn {
14            text-decoration: none;
15            color: #fff;
16            display: block;
17            padding: 17px 0 18px 0;
18            text-align: center;
19            text-shadow: $darker-green 1px 1px 2px;
20            border-left: 1px solid $lighter-green;
21            border-right: 1px solid $darker-green;
22            &--text-ja {
23                font-size: 14px;
24                line-height: 20px;
25            }
26            &--text-en {
27                font-size: 10px;
28                font-weight: bold;
29                line-height: 15px;
30            }
31            &:hover {
32                background-image: linear-gradient($darker-green 0%, $lighter-green 100%);
33            }
34        }
35        .first {
36            border-radius: 6px 0 0 6px;
37        }
38        .last {
39            border-radius: 0 6px 6px 0;
40            border-right: none;
41        }
42    }
43}
44/*ここに記述するとborderが効かない。*/
45/*.last {
46            border-radius: 0 6px 6px 0;
47            border-right: none;
48}*/
49/*こう書けば効く。*/
50/*.nav .last {
51            border-radius: 0 6px 6px 0;
52            border-right: none;
53}*/
54

該当部分のCSSファイルも載せておきます。

正常に動作しているときのソース↓

CSS
1.nav {
2  margin-top: 31px;
3  display: -webkit-box;
4  display: -ms-flexbox;
5  display: flex;
6  border: 1px solid #6cc6c4;
7  border-radius: 6px;
8  background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
9  background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
10}
11
12.nav .form {
13  width: 20%;
14  height: 70px;
15}
16
17.nav .form__btn {
18  text-decoration: none;
19  color: #fff;
20  display: block;
21  padding: 17px 0 18px 0;
22  text-align: center;
23  text-shadow: #6cc6c4 1px 1px 2px;
24  border-left: 1px solid #9ce3e1;
25  border-right: 1px solid #6cc6c4;
26}
27
28.nav .form__btn--text-ja {
29  font-size: 14px;
30  line-height: 20px;
31}
32
33.nav .form__btn--text-en {
34  font-size: 10px;
35  font-weight: bold;
36  line-height: 15px;
37}
38
39.nav .form__btn:hover {
40  background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc6c4), to(#9ce3e1));
41  background-image: linear-gradient(#6cc6c4 0%, #9ce3e1 100%);
42}
43
44.nav .form .first {
45  border-radius: 6px 0 0 6px;
46}
47
48.nav .form .last {
49  border-radius: 0 6px 6px 0;
50  border-right: none;
51}

.lastを外側に記述したときのソース↓

css
1.nav {
2  margin-top: 31px;
3  display: -webkit-box;
4  display: -ms-flexbox;
5  display: flex;
6  border: 1px solid #6cc6c4;
7  border-radius: 6px;
8  background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
9  background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
10}
11
12.nav .form {
13  width: 20%;
14  height: 70px;
15  margin-right: 0;
16  /*.first {
17            border-radius: 6px 0 0 6px;
18        }
19        .last {
20            border-radius: 0 6px 6px 0;
21            border-right: none;
22        }*/
23}
24
25.nav .form__btn {
26  text-decoration: none;
27  color: #fff;
28  display: block;
29  padding: 17px 0 18px 0;
30  text-align: center;
31  text-shadow: #6cc6c4 1px 1px 2px;
32  border-left: 1px solid #9ce3e1;
33  border-right: 1px solid #6cc6c4;
34}
35
36.nav .form__btn--text-ja {
37  font-size: 14px;
38  line-height: 20px;
39}
40
41.nav .form__btn--text-en {
42  font-size: 10px;
43  font-weight: bold;
44  line-height: 15px;
45}
46
47.nav .form__btn:hover {
48  background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc6c4), to(#9ce3e1));
49  background-image: linear-gradient(#6cc6c4 0%, #9ce3e1 100%);
50}
51
52.first {
53  border-radius: 6px 0 0 6px;
54}
55
56.last {
57  border-radius: 0 6px 6px 0;
58  border-right: none;
59}