CODEWITHSUNDEEP
htmlcssbutton
Eragon20
Eragon20

Reputation: 483

Button not appearing circular in css

I am trying to create a group of circular buttons with CSS:

.button {
display:inline;
height:10px;
width:10px;
border: 1px solid black;
border-radius:50%;
}

However, my buttons appear to be more ovoid in-shape, as shown in the screenshot below. Why is this and how can I address this issue?

enter image description here

Upvotes: 0

Views: 420

Answers (1)

caramba
caramba

Reputation: 22480

It's because by default the <button> element has padding. Set padding: 0;

.button {
  display:inline;
  height:10px;
  width:10px;
  border: 1px solid black;
  border-radius:50%;

  padding: 0;
}
<button class="button"></button>

In google chrome the default padding for a button is padding: 2px 6px 3px; which means

padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;

and this is what makes it look ovoid. So padding does not have to be zero but you must set all values to the same size:

.button {
  display:inline;
  height:10px;
  width:10px;
  border: 1px solid black;
  border-radius:50%;

  padding: 20px;
}
<button class="button"></button>

Upvotes: 3

Related Questions