Good day to all. Question: how to make a css circle for any screen? Percentage of width, height and border-radius gives a circle on some screens and an ellipse on others.

  • For disproportionate screens, you will not succeed) Software is not aware that there is uncalibrated tin. - vp_arth

2 answers 2

Width with height must be made the same, then everything should be normal.

circle { display: inline-block; border-radius: 100%; } .half_w { width: 50vw; height: 50vw; } .tenth_h { width: 10vh; height: 10vh; } .red { background-color: red; } 
 <circle class="tenth_h red"></circle> <circle class="half_w red"></circle>

  • Thanks for the answer, it helped) - Riley

Via pseudo-spacer with padding-top: 100% .

 .circle { width: 100%; border-radius: 50%; background-color: lightblue; } .circle:before { content:''; padding-top: 100%; display: inline-block; } 
 <div class=circle></div>

  • This option will also test) Thanks - Riley