CSS border merge

Question

我從兩個邊框創建了一個向上箭頭按鈕，不幸的是 它沒有合併在一起，所以我可以看到邊框是如何堆疊在 彼此之間的，但它們應該像一個元素一樣！

#myBtn { 
 
    //display: none; 
 
    position: fixed; 
 
    bottom: 20px; 
 
    right: 30px; 
 
    z-index: 999; 
 
    border: 10px solid #778293; 
 
    background-color: rgba(0, 0, 0, 0); 
 
    border-left: none; 
 
    border-top: none; 
 
    cursor: pointer; 
 
    width: 4vh; 
 
    height: 4vh; 
 
    transform: rotate(225deg); 
 
    transition: border-width 150ms ease-in-out; 
 
} 
 

 
#myBtn:hover { 
 
    border-bottom-width: 1em; 
 
    border-right-width: 1em; 
 
}

<button onclick="topFunction()" id="myBtn" title="Go to top">My Button</button>

Answer 1

#myBtn { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 20px; 
 
    right: 30px; 
 
    z-index: 999; 
 
    border: 10px solid #778293; 
 
    background-color: rgba(0, 0, 0, 0); 
 
    border-left: none; 
 
    border-top: none; 
 
    cursor: pointer; 
 
    width: 4vh; 
 
    height: 4vh; 
 
    transform: rotate(225deg); 
 
    transition: border-width 150ms ease-in-out; 
 
} 
 

 
#myBtn:hover { 
 
    border-bottom-width: 1em; 
 
    border-right-width: 1em; 
 
}

<button onclick="topFunction()" id="myBtn" title="Go to top">My Button</button>