Ajuda na programação, respostas a perguntas / Css / Faça a borda da borda superior da borda completamente - css, css3

Faça a borda da borda superior da borda completamente - css, css3

Eu tenho uma barra de navegação com três links. Se você olhar de perto, verá que a borda superior verde-escura no flutuante e as âncoras ativas não cobrem a borda marrom. Existe alguma maneira de fazer isso?

Aqui está o que parece;

body {
font-family: "Roboto", sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}

.container {
margin: 0 10% 0 10%;
}

header, ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4CAF50;
}

h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: "Roboto", sans-serif;
font-weight: 400;
}

li {
float: left;
margin: 0 0 0 0;
}

h1, li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border: 2px solid #4CAF50;
border-top: 6px solid #4CAF50
}


/*link actions*/

li a.active {
background-color: #795548;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}

li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
color: #795548;
}

li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}

a:first-child {
text-decoration: none;
color: #FFFFFF;
}

a:first-child:hover {
color: #795548;
}

<body>
<noscript>Please Use JavaScript you loser.</noscript>
<div class="container">
<header>
<nav>
<h1><a href="index.html">My Website</a></h1>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="page2.html">About</a></li>
<li><a href="page3.html">Getting Started</a></li>
</ul>
</nav>
</header>
</div>
</body>

Respostas:

1 para resposta № 1

Esse é o jeito que as fronteiras se encontram. Eu sugiro usar uma caixa-sombra em vez da borda superior

NOTA:

Você estava limpando os carros alegóricos com overflow:hidden no ul. Isso impediria essa técnica de funcionar. Eu sugeriria um método alternativo clearfix.

* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}
.container {
margin: 0 10% 0 10%;
}
header,
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
width: 100%;
background-color: #4CAF50;
}
h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: "Roboto", sans-serif;
font-weight: 400;
}
li {
float: left;
margin: 0 0 0 0;
}
h1,
li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border: 2px solid #4CAF50;
border-top: none;
box-shadow: 0 -6px 0px 0px #4CAF50;
}
/*link actions*/

li a.active {
background-color: #795548;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0 0px #388E3C;
}
li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0 0px #388E3C;
color: #795548;
}
li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0px 0px #388E3C;
}
a:first-child {
text-decoration: none;
color: #FFFFFF;
}
a:first-child:hover {
color: #795548;
}

<div class="container">
<header>
<nav>
<h1><a href="index.html">My Website</a></h1>
<ul>
<li><a href="index.html" class="active">Home</a>
</li>
<li><a href="page2.html">About</a>
</li>
<li><a href="page3.html">Getting Started</a>
</li>
</ul>
</nav>
</header>
</div>

0 para resposta № 2

Como @Paulie_D comentou, o marrom no topoA borda da sua marca de âncora é o ponto de interseção entre sua borda verde superior e a borda marrom circundante. Como a cor de fundo do seu li já é marrom, eu recomendo remover a borda marrom da seguinte forma:

body {
font-family: "Roboto", sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}

.container {
margin: 0 10% 0 10%;
}

header, ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4CAF50;
}

h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: "Roboto", sans-serif;
font-weight: 400;
}

li {
float: left;
margin: 0 0 0 0;
}

h1, li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border-top: 6px solid #4CAF50
}

h1 {
border: 2px solid #4CAF50;
}


/*link actions*/

li a.active {
background-color: #795548;
border-top: 6px solid #388E3C;
}

li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
color: #795548;
}

li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}

a:first-child {
text-decoration: none;
color: #FFFFFF;
}

a:first-child:hover {
color: #795548;
}

<body>
<noscript>Please Use JavaScript you loser.</noscript>
<div class="container">
<header>
<nav>
<h1><a href="index.html">My Website</a></h1>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="page2.html">About</a></li>
<li><a href="page3.html">Getting Started</a></li>
</ul>
</nav>
</header>
</div>
</body>

Observação: também removi a borda verde alternativa de seu li para aplicar-se apenas ao h1.