64
.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:

enter image description here

7
  • 6
    Safari for Mac/iOS, or for Windows? It's worth noting that the Windows version isn't supported anymore...
    – Tieson T.
    Commented Jun 19, 2013 at 22:02
  • Safari on Mac. And I cannot figure out why does Safari behave like this... Commented Jun 19, 2013 at 22:18
  • If you can change the radius for different browsers seprately then increase it for safari! :) Commented Jun 19, 2013 at 22:18
  • It doesn't matter what value I set. I can, for example, do something like 100px (on 40px picture) and no effect. Commented Jun 19, 2013 at 22:20
  • If possible, try setting values in px and see if that makes a difference. BTW, you don't need vendor prefixes for border-radius anymore. Also, it could be a safari bug that'll fix itself during an update.
    – frenchie
    Commented Jun 20, 2013 at 1:10

15 Answers 15

124

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.

11
  • 2
    Two points of note: 1. border radius is now well supported to the point that you can dro vendor prefixes. 2. when using vendor prefixes, state the generic after all vendor specific ones. Great answer to this question, btw! Commented Jun 20, 2013 at 11:25
  • @Antony Hmm. So, Safari says "50% radius" is (in this example) 50px, and therefore the flat edges are the 12px of "leftover" border? Which would imply that Firefox et al must be calculating the radius as 53px? Perhaps leaving the markup as it was but changing the box-sizing would work as well? Almost makes me wish I had a Mac to test this on...
    – Tieson T.
    Commented Jun 21, 2013 at 5:01
  • 1
    @TiesonT. Sounds reasonable, but changing box-sizing has no effect on Safari. Just tested it.
    – Antony
    Commented Jun 21, 2013 at 5:08
  • @Antony Fair enough. Will have to keep this behavior in mind. Thanks for checking.
    – Tieson T.
    Commented Jun 21, 2013 at 5:15
  • 3
    @Julian It appears to be fixed in Safari 7.0.
    – Antony
    Commented Dec 5, 2013 at 2:20
40

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/

4
  • Worked for me, except I didn't use -webkit-transform and I added border-radius: xx%
    – Alex W
    Commented Oct 16, 2014 at 21:11
  • Same thing but with clip-path: -webkit-clip-path: circle(50% at 50% 50%);
    – fregante
    Commented Oct 5, 2016 at 11:40
  • 5
    for me, I just needed the translateZ(0);
    – Ronnie
    Commented Jun 20, 2019 at 21:36
  • 1
    Hi everyone, if it works for you, What's the black magic under the surface of the mysterious transform: translateZ(0);? If I don't understand it, How can I write it in my production codebase irresponsibly?
    – legend80s
    Commented Jun 16, 2020 at 2:32
4

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;
}
1
  • I tried in Safari 5.1 under windows and it didn't help solve the problem.
    – Julian
    Commented Nov 20, 2013 at 15:35
4

Add the following CSS Code to the root html element:

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
1
  • This solution worked for me with only -webkit-transform: translate3d(0, 0, 0); Which is interesting because if I understand correctly this is moving the image 0 px? Also I was able to add this at the image level and not the root level. Commented Dec 18, 2021 at 16:41
3

Just simply use box-shadow if you don't care the old browsers.

.rounded {
  box-shadow: 0 0 0 10px pink;
}
1
  • In Aug 2020, this was by far the easiest implementation to get a small border working around a Semantic React UI Table. box-shadow: 0px 0px 1px 0.5px #fff; Commented Aug 16, 2020 at 11:37
2

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.

1
  • I tried in Safari 5.1 under windows and it didn't help solve the problem.
    – Julian
    Commented Nov 20, 2013 at 15:36
2

Simple way i did was use rounded PNG images and apply a border and radius of 50%

example :

http://www.laugfs.lk/#ourbusiness

2

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: Border radius clipping example for Safari 5.1.0 and Firefox 35.1.0

This solution was also tested in Internet Explorer 9 and Chrome 43 and the results were the same.

2

2023 Version:

clip-path shape syntax is now generally available across all modern browsers.

I ran into this same problem on Safari with it not clipping overflowing contained pseudo-elements.

Using clip-path: content-box should solve most use cases in safari:

.my-class {
  border-radius: 50%; /* or whatever */
  clip-path: content-box;
  overflow: hidden;
}

See here for more info

1
  • This is the preferred way to clip the overflow in Safari.
    – yansusanto
    Commented Oct 10, 2023 at 16:08
1

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%;
}
0
1

Ammend to Lesbaas 2023 Answer:

Use view-box for clip-path if you want to have a border around the div

clip-path: view-box;

0

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>

0

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.sstatic.net/Kgblc.png" style="height:100%"/>
 </div>
0

If any one still facing this issue. Just include

-webkit-mask-image: radial-gradient(circle, white 100%, black 100%);
-webkit-mask-composite: destination-out;

To your css if you want to give border-radius to border-image. My-code: I use styled component you can go with simple css also.

export const TicketUpperContainer = Styled(Grid)`
  border-radius: 20px;
  -webkit-border-radius: 20px;
  overflow: hidden !important;
  ${(props) =>
      props.status === "upcoming" &&
      `
    border-image: url(${_url("assets/redesign/icons/ticketCardTop.svg")}) 30 stretch;
    border-top: 23px solid transparent;
  `};
  ${(props) =>
      props.status === "past" &&
      `
    border-image: url(${_url("assets/redesign/icons/pastTicketCardTop.svg")}) 30 stretch;
    border-top: 23px solid transparent;
  `};
  ${(props) => `
  background:
    radial-gradient(circle 0px at top    left ,#0000 98%,#fff  ) top    left,
    radial-gradient(circle 0px at top    right,#0000 98%,#fff ) top    right,
    radial-gradient(circle ${props.semiCircleRadius || 30}px at bottom left ,#0000 98%,#fff) bottom left,
    radial-gradient(circle ${props.semiCircleRadius || 30}px at bottom right,#0000 98%,#fff) bottom right;
  `};
  
  background-size:51% 51%;
  background-repeat:no-repeat;
  padding: 16px 24px;
  /**Included code */
  -webkit-mask-image: radial-gradient(circle, white 100%, black 100%);
  -webkit-mask-composite: destination-out;
`;
0

Here is a solution that works for me. I needed something that supported most browsers, so I combined some answers above.

Below there is a solution I used in combination with cropperjs package.

.cropper-crop-box { // avatar container
  border-radius: 50%;
  clip-path: view-box;
  overflow: hidden;
  border: 3px dotted white;
}

.cropper-view-box { // avatar
  border-radius: 50%;
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  vertical-align: middle;
  -khtml-border-radius: 50%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.