Why doesn't border-radius round the entire area of ​​the block, and what is the best element to use?

Question

css

Sketched a little code, something like a dash game.
For the hit area, I chose a regular block, rounded and filled it, it looks normal outwardly, but for some reason the area of ​​the block itself remains the same after rounding. The corners of the block are found adjacent.
This is visible when the outline property is set, I noticed this before, but somehow it was never needed.
Can this be fixed somehow?
If not, what would you recommend to use in this case, maybe canvas?

Answer 1

.elem:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,60,255,.5);
}