set parent radius same value as child circle radius
So I wanted to make some kind of button that have an image(circle) inside it and some text next to it, I wanted the size to be dependent on the circle image and the parent radius has to match the circle image radius so it will fit perfeclty, here's my attempt:
https://jsbin.com/cewodeyiso/1/edit?html,css,output
The problem here is that the border-radius is calculated on a hard coded value of the circle width, I wanted it to work no matter what the auto width of the circle is. Any insight on how to do it?
JS Bin
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...
4 Replies
the usual go to for this is just an arbitrarily high
border-radius value on the pill shaped element. Something like 9999px or 100vw anything that gets computed to pixels will work because the browser will clamp the actually value to 50% of the element height.Oohhh Ok I didnt know this, I tried it one time with no element in it and it gives weird ellipse shape. Good to know. When you say its clamped did you mean when there's content(childs) inside the parent the radius has a limit? thats why when we can put up a huge number? clamping is done on the height ?
The ellipse shape will happen if you use something like
border-radius: 50%; on an element that isn't square.
The browser will clamp the px border-radius value to half the value of the smaller dimension.Ohh ok thx for the infos, I just tested it again with percentage and apparently it also has a clamp above 50% it doesnt change, is it true?