<!DOCTYPE html>
<html>
<head>
<style>

:root {
  --focus-ring-size: 3px;
  --input-width: 160px;
  --input-height: 20px;
  --border-width: 1px;
}

#overlay {
    position: absolute;
    top: var(--focus-ring-size);
    left: var(--focus-ring-size);
    background-color: red;
    border: var(--border-width) solid red;
    width: calc(var(--input-width) + 2 * var(--focus-ring-size));
    height: calc(var(--input-height) + 2 * var(--focus-ring-size));
}

</style>
</head>
<body>
<div id="overlay"></div>
</body>
</html>