CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dtouch3d
dtouch3d

Reputation: 143

Circle button becomes ellipsis after adding border with Bootstrap

I want to have some circle buttons in my page, and with the following code everything seems fine except when I try to add border to the buttons with Bootstrap enabled. Commenting the "border: 10px solid" line creates a proper circle but adding the border transforms the button into an ellipsis, as can be seen below. This seems to be a Bootstrap problem because it shows just fine without it. Is something wrong with the code or is it a bug in Bootstrap ?

.round-button {
  width: 15vw;
}
.round-button-circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  border: 10px solid #cfdcec;
  overflow: hidden;
  background: #4679BD;
  box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
  background: #30588e;
}
.round-button a {
  display: block;
  float: left;
  width: 100%;
  padding-top: 50%;
  padding-bottom: 50%;
  line-height: 1em;
  margin-top: -0.5em;
  text-align: center;
  color: #e2eaf3;
  font-family: Verdana;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>my 
<ul class="list-inline text-center">
  <li>
    <div class="round-button">
      <div class="round-button-circle"> <a class="round-button">WHAT</a>

      </div>
    </div>
  </li>
  <li>
    <div class="round-button">
      <div class="round-button-circle"> <a class="round-button">WHAT</a>

      </div>
    </div>
  </li>
</ul>

Upvotes: 2

Views: 1431

Answers (1)

chdltest
chdltest

Reputation: 873

What happens is that if your button is perfectly round when it's 50px wide by 50px high, adding a border of 10px will then make it 60px wide by 60px high while the radius stays the same, thus creating an oval shape.

In this situation, you want to apply box-sizing: content-box; to the div that has the border so that the border is treated as part of the 50x50 (meaning it then becomes 40x40 with 10px border making it back to 50x50).

See below for the results. Keep in mind that you'll have to adjust the space between them again.

.round-button {
  width: 15vw;
}
.round-button-circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  border: 10px solid #cfdcec;
  overflow: hidden;
  background: #4679BD;
  box-shadow: 0 0 3px gray;
  box-sizing: content-box;
}
.round-button-circle:hover {
  background: #30588e;
}
.round-button a {
  display: block;
  float: left;
  width: 100%;
  padding-top: 50%;
  padding-bottom: 50%;
  line-height: 1em;
  margin-top: -0.5em;
  text-align: center;
  color: #e2eaf3;
  font-family: Verdana;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>my 
<ul class="list-inline text-center">
  <li>
    <div class="round-button">
      <div class="round-button-circle"> <a class="round-button">WHAT</a>

      </div>
    </div>
  </li>
  <li>
    <div class="round-button">
      <div class="round-button-circle"> <a class="round-button">WHAT</a>

      </div>
    </div>
  </li>
</ul>

Upvotes: 1

Related Questions