In CSS it is allowed to write something like this.
#div-with-border {
width: 100%; // scales with parent wrapper
height: 30%; // scales with parent wrapper
border: 1px solid black;
border-radius: 10%;
}
If #div-width-border
isn't a perfect square the border won't be a circle, since this means, that 10% of the width and 10% of the height are used for the border-radius (which differ). I would like to get perfect circles... I can't use px
, since the border-radius depends on the height/width.
I'm sure that the width of #div-width-border
is always greater than the height, of the element. I would need a border radius of the size 100% of element height
to get a perfect circle, but just 100%
won't do it, since it'll use the element width for one part of the radius calculation.
50%
?px
...", "If#div-width-border
isn't a perfect square...", etc.border-radius: 50%;
if the div is a square, but mine is not. Also it varies with the size of its parent so I can't use an absolute px size."