CSS Styled Button double colour-CodePudding

My button looks like this (atachement) and my CSS Code for the Button looks like that and it is double colored. How can I change it that it is just light green:

.button {
    font-size: 1rem;
    font-weight: bold;
    padding: 1em 2em;
    cursor: pointer;
    background: transparent;
    color: white;
    border-color: hsl(126, 100%, 30%);
    border-radius: 1.5em/50%;

}

Image

CodePudding user response：

You can set your border's "style" to solid, right now it is set to inset. Add border-style: solid to your CSS:

.button {
    font-size: 1rem;
    font-weight: bold;
    padding: 1em 2em;
    cursor: pointer;
    background: transparent;
    color: white;
    border-color: hsl(126, 100%, 30%);
    border-radius: 1.5em/50%;
    border-style: solid;
}

If you want to revert the changes either remove border-style: solid; or use border-style: inset;

More on border-style

CodePudding user response：

the border-style has to be defined which is defined as solid in the below code, if it is not defined it will have to use inset border-style as the border-style which is the default

 .button {
       font-size: 1rem;
       font-weight: bold;
       padding: 1em 2em;
       cursor: pointer;
       background: transparent;
       color: white;
       border: solid 1px hsl(126, 100%, 30%);
       border-radius: 1.5em/50%;
  }