0

I'm try to make a button circle made by a circle and a ring.

https://codepen.io/gremo/pen/BaYqRaE

So here is my CSS. I use background-clip: content-box because the background should extend up to the content box, the box-shadow then makes the ring.

.btn-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 4px solid transparent;
  background-color: #f7e938;
  width: 4rem;
  height: 4rem;
  box-shadow: 0px 0px 0px 4px #f7e938;
  background-clip: content-box;
}

The problem is that the button becomes an oval:

Oval

As soon as i change it to padding-box it seems to work. Just curious about that.What's the shape of the content-box here?

gremo
  • 47,186
  • 75
  • 257
  • 421

1 Answers1

1

Seems like the automatic padding added to the element was uneven. Setting a padding value such as padding: 2px solved the issue on the codepen for me.

enter image description here

Seems like it is coming from default values in User Agent Stylesheet:

enter image description here

Refer to this question for more details regarding this.

cSharp
  • 2,884
  • 1
  • 6
  • 23