Высота границы не отображается правильно

Question

Я искал похожие проблемы, но не смог найти решение. Проблема возникает, когда я вставляю границу, которая не показывает правильную высоту. Я вставил три изображения и безуспешно пытаюсь вставить границу. Это практика для изучения html и css.

HTML:

<div class="choices">

    <div class="choice" id="p">
        <img src="images/paper.png" alt=""> 
    </div>
    <div class="choice" id="r">
        <img src="images/rock.png" alt="">
    </div>
    <div class="choice" id="s">
        <img src="images/scissors.png" alt="">
    </div>
</div>

CSS:

.choices{
  padding: 0;
  margin: 50px 0px;
  text-align: center;
  position: relative; 
} 

.choice {
  display: inline;
  border: 4px solid white;
  border: 50%; 
}

ВЫХОД: вывод в chrome

Answer 1

Проблема в том, что .choice равен display: inline, что означает, что любая высота и ширина не будут иметь никакого эффекта. Измените его на display: inline-block, чтобы решить проблему.

Jsfiddle