如何更改按鈕的邊框顏色？

Question

我一直在嘗試更改按鈕的邊框顏色

我試過做borderColor，但沒有意義：

borderColor: '#FFFFFF'

預期結果

代碼：

headerBtn: {
    backgroundColor: 'black',
    fontSize: '16px',
    fontWeight: 'bold',
    letterSpacing: '-0.16px',
    borderRadius: '20px',
    borderColor: '#FFFFFF',
    color: '#ffffff',
    padding: '6.5px 24px',
    display: ['none', null, null, null, 'inline-block'],
    ml: ['0', null, null, 'auto', '0'],
    mr: ['0', null, null, '20px', '0'],
    '&:hover': {
      color: '#000000',
    },
  }

上面代碼的結果

結果hover

Answer 1

您可以使用

邊框顏色：#ffffff；

試試下面的代碼。

.headerBtn {
    background-color: black;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.16px;
    border-radius: 20px;
    border-color: #FFFFFF;
    color: #ffffff;
    padding: 6.5px 24px;
    display: inline-block;
    margin-left: auto;
    margin-right: 20px;
}

.headerBtn:hover {
  color: #000000;
}