Menu
The only difference between them is the right button has a radius of 5px applied. As with borders, radius allows you to set different properties for each side of the element using the toggle controls.
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
It is generally safest to use the same unit for different dimensions, and this applies to border-radius , too, when the height and width of the element have been set in rem units. The reason is that this ensures that the shape is preserved if the font size of the root element is changed.
The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as innerRadius + distance = outerRadius or more tersely R1 + D = R2 .
I have an image with a border radius of 50% and a 3px border around it. My problem is when the border radius is given, there is a 1px gap between the image and the border.
Issue is demonstrated in the below image.
And the css I'm using,
img {
border: 3px solid #4CB7AC;
height: 46px;
width: 46px;
border-radius:50%;
}
Note that
<img> to get the image. Setting it as a background image is ruled out.Is there a way to remove that gap?
EDIT JS Fiddle link
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