Skip to content

Instantly share code, notes, and snippets.

@ayamflow

ayamflow/gist:b602ab436ac9f05660d9c15190f4fd7b

Created May 9, 2016 19:10
Show Gist options
  • Save ayamflow/b602ab436ac9f05660d9c15190f4fd7b to your computer and use it in GitHub Desktop.
Save ayamflow/b602ab436ac9f05660d9c15190f4fd7b to your computer and use it in GitHub Desktop.
Download ZIP
Safari border-radius + overflow: hidden + CSS transform fix
Raw
gistfile1.css
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
@ignmandagaran
Copy link

❤️❤️❤️❤️

@thiagorossener
Copy link

❤️

@edwinork
Copy link

🙏

@lukejans
Copy link

this solution seems to help to a degree. It makes the line slightly thinner but I'm still seeing a border with overflow hidden.

div {
  position:relative;
  width:200;
  height:200;
  background: #781728;
  border-radius: 100%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(#6CB3A9, #6CB3A9);
  top:40;
  left:90}

@aliemre
Copy link

aliemre commented Feb 3, 2023

Awesome!

@isaacs
Copy link

isaacs commented Feb 10, 2023

Thanks!

@hyposlasher
Copy link

❤️

@fgd007
Copy link

fgd007 commented Mar 23, 2023

How can I buy you a beer!?

@Konglomneshued
Copy link

Thank you! Also works for me in Chrome.

@umar-ibn-shafee
Copy link

Thanks a lot man...

@l-portet
Copy link

Not all heroes wear capes

@thebazel
Copy link

thebazel commented Sep 25, 2023 •
edited
Loading

isolation: isolate; fixes this issue. isolation property works in all browsers.
Demo: https://codepen.io/thebazel/pen/NWeYgRm

@davelavoie
Copy link

We're in July 2024 and this is still the only solution that worked for me.. Thank you!

@tzachyrm
Copy link

isolation: isolate; worked for me. Thanks! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment