Parts of div border being cut off

Like the other commenters, I can quite make out the error you are reporting, but it sounded to me like a box-sizing issue. When reviewing the rendered DOM via https://k7ywy.codesandbox.io/ we can see box-sizing:border-box is not being applied to the wrapper element or the internal elements, but it is fixed in the snippet you pasted in the question.

I noticed a few things I'd question.

1. Why not apply box-sizing to everything? Usually when dealing with width:100%; and padding/border/margin, it makes life so much easier!
   In my example I removed it from the JS and applied it using the CSS file.

2. Why are you using display:flex in multiple places but not assinging any other flex-related properties?
   Try removing that from const InputBox = styled.span and const StyledKeyboard = styled.span

Does that fix it for you? Sandbox example. Rendered output.