Scaling a border-radius 50% class in Chrome doesn't produce a perfect circle
Not sure if this is an issue with chrome. But when I use above code with even width and height (say 4px or 6px) it is working fine, but fails with odd widths like 5px.
Border-radius: 50% produces jagged circles; why not perfect circles?
Add this border: 0;
CSS property in this #mobile-choice-buttons label
, and check:)
perfect circle in css with border-radius doesn't work
Here is a JSfiddle with some changes:
JSFiddle for round badge
The main changes are:
padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;
Having a line-height equal to the container height will center the text vertically. This only works if the text fits on a single line.
Edit: (copied code from JSFiddle)
.badge { display: inline-block; padding: 0; width: 50px; height: 50px; line-height: 50px; font-size: 12px; font-weight: lighter !important; color: #fff !important; text-align: center; white-space: nowrap; vertical-align: baseline; background-color: #d73d33; border-radius:50px; position: relative; top: -3px;}
<span class="badge badge-success">8</span>
Scaled container won't keep round shape (border-radius: 50%)?
Strange, but it works if you set width and height to 6px
or any even number.
Looks like radius is calculated wrong in Chrome when it is an odd number.
.foo { margin: 100px; width: 6px; height: 6px; background-color: green; border-radius: 50%; -webkit-transform: scale(15, 15); transform: scale(15, 15);}
<div class="foo"></div>
Why I'm not getting a perfect circle around an item
That is because the element is not square. Check with chrome debugger what is the width and height and make sure that both match.
My guess is that if you change padding: 0px 20px 0 20px
; to padding: 20px 20px 20px 20px;
it will be square.
Circle with border looks not circular, jagged and not smooth, why?
Because you think you are using 50%
but you aren't, you have used border-radius: 50px;
but that's wrong, you are using border
of 4px
which you forgot to add to the box sizing of your element (If you are aware of how box model of CSS really works).
So you should be using border-radius: 54px;
instead cuz your total element's height
and width
sums up to 108px
counting border on both the sides.
Demo
It is better if you use 50%
in such cases
Demo
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
border:4px solid blue;
}
If you want to stick with the 50px
measurement, than you can alter the box model rendering by using box-sizing: border-box;
box-sizing: border-box;
Demo (Altered Box Model)
Creating a circle using `border-radius`
padding
and the width of the border
is calculated additionally to the width
and height
of your element.
You have different options to solve this:
- add
box-sizing: border-box
to your element which defines what should include in the size calculation - use
border-radius: 50%
- add your border-width and padding to your
border-radius
.
Here the solution just with box-sizing
p { display: inline-block;
margin: 20px; width: 100px; height: 100px;
/* these values get added to your 100px by default */ border: 5px solid #ee3e80; padding: 10px;}
p.three { padding: 0px; border-radius: 50px; /* now width and height determine how big your element is as a whole */ box-sizing: border-box;}
<p class="three"></p>
Related Topics
Excluding an Element from Nth-Child Pattern
Image Popup on Hover in Dt in R
Bootstrap 4 Right Column on Top on Mobile View
Webkit-Transform Alternative for Firefox
MVC Cannot Display Image Using Background-Url in CSS - Uses Bundling
Gradient Servers as External Files in Svg
When and How Do Browsers Render <Style> Tag in <Body>
Web-Kit and Sub-Pixel Values, Workaround
"Position: Fixed" Not Woking When Parent Has the "Transform" CSS Property
CSS Print Style Sheets - Examples
Media Query for High Resolution Mobile 1080Px (Xperia Z etc)
Whitespace in Wrapped Form Element
CSS Doesn't Work on Https Pages in Chrome and Ie
Set CSS3 Box-Shadow Not to Be on Top of Div
Do You Plan to Support Ie 6 on Your Future Projects
8-Digit Hex Is Not a Background-Color Value