How to make a black border overlap yellow-CodePudding

How to make a black border overlap yellow For example, as in the picture

label {
  display: block;
  width: 200px;
  height: 54px;

  border: 1px solid gold;
  border-radius: 4px;
}

.upload {
  border: 1px solid black;
  border-radius: 4px 0px 0px 4px;

  display: block;
  height: 100%;
}

<label>
  <button  role="button" type="button"></button>
</label>

Now the black border is slightly inside the yellow one and should be the same

CodePudding user response：

Just "drag" the button over the outer element's boundaries with a negative margin-top and -left.

And add 2px to the height to compensate.

label {
    display: block;
    width: 200px;
    height: 54px;

    border: 1px solid gold;
    border-radius: 4px;
}

.upload {
    border: 1px solid black;
    border-radius: 4px 0px 0px 4px;

    display: block;
    margin: -1px 0 0 -1px;
    height: calc(100%   2px);
}

<label>
    <button  role="button" type="button"></button>
</label>