title: img-circle class becomes oval in shape after using customized css in bootstrap
body: <p>I am new to bootstrap, and I have to make an image circle in shape using bootstrap. When I add my own CSS for this image, it becomes an oval in shape. Following is the html and css for this.</p>
  
  <p>CSS:</p>
  
  <pre><code>.person {
              border: 10px solid transparent;
              margin-bottom: 25px;
              width: 80%;
              height: 80%;
              opacity: 0.7;
          }
          .person:hover {
              border-color: #f1f1f1;
          }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;p&gt;
                      &lt;strong&gt;Test Member 1&lt;/strong&gt;
                  &lt;/p&gt;
                  &lt;br /&gt;
                  &lt;a href="#demo" data-toggle="collapse"&gt;
                      &lt;img src="images/bandmember.jpg" class="img-circle person" alt="Band Manager" /&gt;
                  &lt;/a&gt;
                  &lt;div id="demo" class="collapse"&gt;
                      &lt;p&gt;Guitarist and Lead Vocalist&lt;/p&gt;
                      &lt;p&gt;Loves long walks on the beach&lt;/p&gt;
                      &lt;p&gt;Member since 1988&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;p&gt;&lt;strong&gt;Test Member 2&lt;/strong&gt;&lt;/p&gt;&lt;br /&gt;
                  &lt;a href="#demo2" data-toggle="collapse"&gt;
                      &lt;img src="images/bandmember.jpg" class="img-circle person" alt="Random Name"&gt;
                  &lt;/a&gt;
                  &lt;div id="demo2" class="collapse"&gt;
                      &lt;p&gt;Guitarist and Lead Vocalist&lt;/p&gt;
                      &lt;p&gt;Loves long walks on the beach&lt;/p&gt;
                      &lt;p&gt;Member since 1988&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;p&gt;&lt;strong&gt;Test Member 3&lt;/strong&gt;&lt;/p&gt;&lt;br /&gt;
                  &lt;a href="#demo3" data-toggle="collapse"&gt;
                      &lt;img src="images/bandmember.jpg" class="img-circle person" alt="Random Name"&gt;
                  &lt;/a&gt;
                  &lt;div id="demo3" class="collapse"&gt;
                      &lt;p&gt;Guitarist and Lead Vocalist&lt;/p&gt;
                      &lt;p&gt;Loves long walks on the beach&lt;/p&gt;
                      &lt;p&gt;Member since 1988&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>