Skip to content

Instantly share code, notes, and snippets.

@yankeyhotel

yankeyhotel/Beveled corners & negative border-radius with CSS3 gradients LESS Mixin

Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yankeyhotel/963095aefd71d522447a to your computer and use it in GitHub Desktop.
Save yankeyhotel/963095aefd71d522447a to your computer and use it in GitHub Desktop.
Download ZIP
Beveled corners & negative border-radius with CSS3 gradients LESS Mixin
Raw
Beveled corners & negative border-radius with CSS3 gradients LESS Mixin
.inverted-border-radius (@color, @size) {
background:
linear-gradient(135deg, transparent @size, @color 0) top left,
linear-gradient(225deg, transparent @size, @color 0) top right,
linear-gradient(315deg, transparent @size, @color 0) bottom right,
linear-gradient(45deg, transparent @size, @color 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image:
radial-gradient(circle at 0 0, transparent @size, @color @size+1),
radial-gradient(circle at 100% 0, transparent @size, @color @size+1),
radial-gradient(circle at 100% 100%, transparent @size, @color @size+1),
radial-gradient(circle at 0 100%, transparent @size, @color @size+1);
}// .inverted-border-radius
@yankeyhotel
Copy link
Author

Thanks to http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients

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