Rounded cornes (border radius) Safari issue - html

Question

.activity_rounded {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
behavior: url(css/PIE.htc);
}
<img src="img/demo/avatar_3.jpg" class="activity_rounded" alt="" />
This is my CSS & HTML. I want to make an image look like a circle. Everything works fine in IE8+, Google Chrome, and Mozilla Firefox. But Safari is acting kinda strange. Here is a demo picture:

Answer 1

To illustrate the problem in Safari, let's begin with a plain image.
Here we have an image of 100px x 100px. Adding a border of 3px increases the element dimensions to 106px x 106px:
Now we give it a border radius of 20%:
You can see it starts cropping from the outer boundary of the element, not from the image itself.
Further increasing the magnitude to 50%:
And changing the border color to white:
You can now see how the issue arises.
Because of such behavior of the browser, when creating an image in a circle with a border, we have to make sure both the image and the border are given a border radius. One way to ensure this is to separate the border from the image by placing the image inside a container, and apply border radius to both of them.
<div class="activity_rounded"><img src="http://placehold.it/100" /></div>
.activity_rounded {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
}
.activity_rounded img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
vertical-align: middle;
}
And now we have a nice circle border around the image on Safari.
See DEMO.

Answer 2

Seems this one works:
.wrap{
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
http://jsfiddle.net/qWdf6/82/

Answer 3

Try this by adding overflow: hidden; to the set of rules. This is an issue with all the webkit browsers:
.activity_rounded {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 3px solid #fff;
behavior: url(css/PIE.htc);
overflow: hidden;
}

Answer 4

Just simply use box-shadow if you don't care the old browsers.
.rounded {
box-shadow: 0 0 0 10px pink;
}

Answer 5

Add the following CSS Code to the root html element:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

Answer 6

Have you tried the longhand markup?
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
It seems like there are some bugs on using the short-hand notation with some versions of Safari.

Answer 7

Simple way i did was use rounded PNG images and apply a border and radius of 50%
example :
http://www.laugfs.lk/#ourbusiness

Answer 8

Instead of putting the border on the image itself, put it on the container. Make sure the border-radius is on both the image and the container
.img-container {
border-radius 100%;
border: solid 1px #000;
overflow: hidden;
}
.img {
border-radius: 100%;
}

Answer 9

If the image's border radius is set the same as its parent div, the accepted solution works fine for circular images but not rounded rectangles because the width of the image is less than that of its parent div and the border radius needs to be scaled in proportion to the image, otherwise the image will appear more rounded than the parent div and there will be a gap between the inside edges of the parent div and the outside edges of the image.
However, if you can specify your div/image widths in absolute dimensions it's possible to set a border radius for the image so that it will fit exactly inside its parent div, by taking into account the border width.
HTML:
<div class="image-container-1"><img src="my_image.jpg" /></div>
<div class="image-container-2"><img src="my_image.jpg" /></div>
CSS:
.image-container-1 {
border: 6px solid #FF0000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
height: 250px;
overflow: hidden;
width: 250px;
}
.image-container-2 {
border: 6px solid #FF0000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
height: 250px;
overflow: hidden;
width: 250px;
}
.image-container-2 img {
border-radius: 14px; /* 20px border radius - 6px border */
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
height: 250px;
width: 250px;
}
RESULT:
This solution was also tested in Internet Explorer 9 and Chrome 43 and the results were the same.

Answer 10

But if you have a border with radius on a div and inside it you have dynamic content (like if you click on that div, it slides down and show some other content), and you want to redesign your border with the same radius, you can use an aux class that redraw the radius (but the hack is that if you don't change the colour of the border the webkit will not redraw it).
Eg:
$(document).on('click', '.parent', function(e){ $('.content').toggleClass('opened').slideToggle(300);
$(this).toggleClass('refreshBorders');
});
.parent{
cursor:pointer;
text-align:center;
-webkit-border:2px solid black;
-moz-border:2px solid black;
border:2px solid black;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-background-clip:padding-box;
transition: all 0.15s ease-in-out;
}
.content{
text-align:center;
display:none;
}
.opened{
display:inline-block;
}
.refreshBorders{
-webkit-border:2px solid red;
-moz-border:2px solid red;
border:2px solid red;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-background-clip:padding-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="first">
<h1> title </h1>
</div>
<div class="content">
<p> content content content</p>
</div>
</div>

Answer 11

do not use the position:relative|absolute style attribute for your overflow:hidden
rounded corner item
for example
<style>
.rounded_corner_style
{
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
border-radius:100px; /* you can also use border-radius:100% | border-radius:2px*/
}
</style>
<div class="rounded_corner_style">
<img src="https://i.stack.imgur.com/Kgblc.png" style="height:100%"/>
</div>