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
CodePudding user response:
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;
}