How to change border color of a button?

Question

I have been trying to change the border color of a button

I tried doing borderColor but it was pointless:

borderColor: '#FFFFFF'

Expected outcome

Code:

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',
    },
  }

Outcome from the code above

Outcome while hover

Answer 1

You can use

border-color: #ffffff;

Try the below code.

.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;
}