Skip to content

Instantly share code, notes, and snippets.

@joshuabaker
Created November 29, 2022 18:53
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 joshuabaker/5beaf9d314ff887660a63cbc0d7f177e to your computer and use it in GitHub Desktop.
Save joshuabaker/5beaf9d314ff887660a63cbc0d7f177e to your computer and use it in GitHub Desktop.
Example of using border image with border radius using a exclusion mask.
.box {
--radius: 3px;
position: relative;
width: 64px;
height: 64px;
background: linear-gradient(to bottom, green, gold);
border-radius: var(--radius);
}
.box::after {
content: "";
position: absolute;
inset: 0px;
border-radius: var(--radius);
border: 1px solid transparent;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.16)) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment