CODEWITHSUNDEEP
css
Eva G.
Eva G.

Reputation: 135

Border-radius: 50% produces jagged circles; why not perfect circles?

I found other threads with similar titles, but I couldn't find a solution that works for me in those threads.

I'm trying to produce input labels that are perfect circles by combining equal width/height with border-radius:50%, but the edges come out pixelated. I've tried various pixel values (both even and odd) for width/height, but the problem remains.

How do I make the circles perfect?

Upvotes: 5

Views: 11378

Answers (4)

Praveen
Praveen

Reputation: 56509

Upon inspecting your css, it seems jQuery UI already has a grey border for the circle. 

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

Which is responsible for the jagged circle. Reset the borders to 0 for all the circle elements.

Still the edges(borders) will be somewhat jaggered. Give a try adding browser's prefixed properties like

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

If you're trying to have a perfect circle, svg or images will be better option

Upvotes: 1

Prime
Prime

Reputation: 3625

Remove the border: 1px solid #d3d3d3; in the below class.

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

I see perfect circle without pixel distraction.

Upvotes: 1

Bud Damyanov
Bud Damyanov

Reputation: 31839

What you want, as far as I understand, is to anti-alias the shape. Instead of giving transparent you can make use of rgba(255, 255, 255, 0) for the border. This again gives transparent. But the alpha=0 makes smooth edges.

#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); 
    }

Check the fiddle.

And this is the browser support for alpha values.

Upvotes: 2

stanze
stanze

Reputation: 2480

Add this border: 0; CSS property in this #mobile-choice-buttons label, and check:)

Upvotes: 3

Related Questions