styling the outline border with outer overflow set to hidden

Question

The CSS style:

.outer {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #000;
  overflow: hidden;
}

.outer:focus {
  outline: 10px solid #00FF00;
}

.inner {
  position: absolute;
  width: 50%;
  height: 200px;
  background-color: #F0F;
  left: 50%;
}

.inner:focus {
  outline: 10px solid #FFFF00;
}

The HTML code:

<div tabindex="0" class="outer">
<div tabindex="0" class="inner">

The problem: I want to make inner div focusable with an outline border, but because of overflow: hidden; I can't do it. This is only an example. Also, I don't wanna touch the overflow: hidden of the outer div when the focus is on the inner one, so this won't go. Perhaps there's an easy way(code only, no imgs-graphics) to implement some sort of border on the focusable element?

*CSS-HTML code only pls. No JS

Answer 1

Use a negative offset for the outline when the div is focused, like so:

.inner:focus {
   outline-offset: -10px;
}

The value should be equal to the outline-width.

---

As an alternative approach you might also use an inset box-shadow e.g.

box-shadow: inset 0 0 0 10px #ff0;