Menu
This is for web dev. When using a 1px border radius on a circle or a square with really rounded corners, the stroke starts to break. If we were to change it to 2px's it would get better and better the more px we add. But is there a way to fix this problem with a 1px stroke?
background: rgba(32, 32, 32, .9); height: 30px; width: 30px; border: 1px solid white; border-radius: 20px; :hover { height: 300px; width: 200px; } Images attached!
593
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
In Mozilla applications like Firefox, the -moz-outline-radius CSS shorthand property can be used to give an element's outline rounded corners.
add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; that will give you the anti-aliasing you're looking for.
176
There isn't much you can do about this, unfortunately. That's up to the browser to determine how to render the sub-pixels that make up a curved 1px border. Some browsers will antialias it nicely, others will not.
The only reliable solution is to use images, which is so... 90s. Or something XD Point is, we shouldn't have to do things like that, but sometimes we have to either settle for imperfect rendering, or use outdated methods.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
