Почему border-radius округляет не всю область блока и какой лучше элемент использовать?

Question

[wd-315]

Набросал небольшой код, что-то вроде игры в тире.
Для области попадания выбрал обычный блок, скруглил и залил его, внешне выглядит нормально, но вот почему-то область самого блока после скругления остается той же. Углы блока находят на соседние.
Это видно при установленном свойстве outline, я это и раньше замечал, но как-то никогда не нужно это было.
Можно ли это как-то исправить?
Если нет, что посоветуете использовать в данном случае, может canvas?

Comments

[Pavel Pavel]

Может вам поможет карта изображений? Тег map.

[wd-315]

Pavel Pavel, да, спасибо за помощь, то что нужно

Answer 1

[Андрей Федоров]

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

Comments

[wd-315]

Спасибо за ответ, но не в этом проблема, outline использовал для наглядности.
Суть в том, что если нажать на область за кругом заливки, клик засчитывается как в область дива

[Андрей Федоров]

wd-315, офигенный вопрос. ))) Я бы сказал "сложный", а не "средний".

[Алий Кунашев]

w3c