Radius: 50% create gear circles; why not perfect circles?

Question

I found other topics with similar headings, but I could not find a solution that works for me in these threads.

I am trying to create input shortcuts that are perfect circles by combining equal width / height with a border radius: 50%, but the edges look jagged. I tried various pixel values ​​(even and odd) for width / height, but the problem remains.

How to make circles perfect?

Answer 1

Add this border: 0;CSS property to this #mobile-choice-buttons labeland check :)

Answer 2

, , , - . rgba(255, 255, 255, 0) . . alpha=0 .

#circle { 
       width: 140px;
       height: 140px;
       background: blue; 
       -moz-border-radius: 70px; 
       -webkit-border-radius: 70px; 
       border-radius: 70px;
       border: 0px solid rgba(255, 255, 255, 0); 
    }

fiddle.

this -.

Answer 3

border: 1px solid #d3d3d3; .

ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  /* border: 1px solid #d3d3d3; */

.

Answer 4

css , jQuery UI grey border circle.

.ui-state-default, 
.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { /* CSS */ }

. Reset borders 0 .

() . ,

-webkit-border-radius
-moz-border-radius

, svg