CODEWITHSUNDEEP
htmlcss
Ivanka Todorova
Ivanka Todorova

Reputation: 10219

Rounded cornes (border radius) Safari issue

.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

Upvotes: 64

Views: 125804

Answers (15)

Martijn Zentjens
Martijn Zentjens

Reputation: 1

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

Upvotes: 0

Rohit Thakur
Rohit Thakur

Reputation: 89

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;
`;

Upvotes: 0

Fohri
Fohri

Reputation: 11

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;

Upvotes: 1

Lesbaa
Lesbaa

Reputation: 2316

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

Upvotes: 3

Daniel Ehrhardt
Daniel Ehrhardt

Reputation: 1032

Add the following CSS Code to the root html element:

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

Upvotes: 5

Karthikeyan Ganesan
Karthikeyan Ganesan

Reputation: 2035

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>

Upvotes: 0

GeorgeR
GeorgeR

Reputation: 1

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>

Upvotes: 0

Noel Whitemore
Noel Whitemore

Reputation: 794

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.

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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;
}

Upvotes: 4

Jin Liu
Jin Liu

Reputation: 39

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

.rounded {
  box-shadow: 0 0 0 10px pink;
}

Upvotes: 3

nakrill
nakrill

Reputation: 720

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/

Upvotes: 40

James Hartig
James Hartig

Reputation: 1009

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

Upvotes: 1

Thilanka De Silva
Thilanka De Silva

Reputation: 1088

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

example :

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

Upvotes: 2

Antony
Antony

Reputation: 15106

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.

Upvotes: 124

FungyBytes
FungyBytes

Reputation: 413

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.

Upvotes: 2

Related Questions